[React] 안녕 CRA, 안녕 Vite

create-react-app(CRA)의 문제점

CRA의 가장 큰 문제점은 초기 설치해야 할 종속 요소가 많아 용량이 상당히 커져 느리다. 또한 프로젝트 규모가 커지면 개발 및 빌드 시간이 늘어나며 개발자의 생산성이 떨어진다.

CRA가 느린 이유는 내부적으로 웹팩을 사용하기 때문이다. 웹팩은 제공되기 전에 전체 응용 프로그램 코드를 번들로 묶는다. 즉, 사용하지 않는 설정이나 라이브러리까지 묶는다. 또한 대규모 코드베이스를 사용하면 개발 서버를 가동하는 데 더 많은 시간이 걸리고 변경 사항을 반영하는데 오랜 시간이 걸린다.

Why vite?

느린 서버 시작 시간

Vite는 먼저 애플리케이션의 모듈을 종속성과 소스 코드의 두 가지 범주로 나누어 개발서버 시작 시간을 개선한다.

• esbuild를 사용해 종속성을 사전 번들링한다. 이는 Javascript 기반 번들러보다 10-100배 더 빠르다.
• Vite는 기본 ESM을 통해 소스 코드를 제공한다.
• Vite는 브라우저가 요청하는 대로 소스 코드를 필요에 따라 변환하고 제공한다.

느린 업데이트

번들러 기반의 경우 전체 번들을 다시 빌드하는 것은 매우 비효율적이다. 업데으트 속도가 앱 크기에 따라 선형적으로 저하되기 때문이다. 전체 번들을 재구성하고 웹 페이지를 다시 로드할 경우 번들을 재구성하는 데 드는 비용이 커지며 페이지를 다시 로드하면 애플리케이션의 현재 상태가 날아가게 된다. 이러한 문제를 해결하기 위해 번들러는 HMR(Hot Module Replacement)을 지원한다. 즉, HMR을 사용하면 페이지의 나머지 부분에 영향을 주지 않고 모듈을 자체적으로 교체("hot-replace")할 수 있다. 하지만 HMR 또한 응용 프로그램의 크기가 커짐에 따라 속도도 크게 저하된다고 한다.

Vite에서 HMR은 기본 ESM을 통해 수행되며 HMR 업데이트가 번들로보다 빠르게 이루어진다고 한다.(체인을 무효화한다는데 무슨 의미인지 모르겠다... 관련 내용은 공식 문서에 설명되어 있다. 포스팅이 이해 안된다면 공식 문서를 참고해주세요.)

Vite는 또한 HTTP 헤더를 활용하여 전체 페이지를 리렌더링하는 속도를 높인다.

[참고 사이트]
Vite 공식문서
4 Reasons Why You Should Prefer Vite Over Create-React-App (CRA)
Goodbye create-react-app
Replace Create React App recommendation with Vite #5487