CRA를 버리고 Vite로 전환하고자 하는 이유

2022년 9월 5일

프로젝트가 커질수록 CRA의 개발 서버 시작이 느려졌다. 파일 하나 수정하고 브라우저에 반영될 때까지 기다리는 시간이 쌓이기 시작했다.

CRA가 느린 이유

CRA는 내부적으로 webpack을 사용한다. webpack은 개발 서버를 시작할 때 전체 애플리케이션을 번들링한다. 파일이 많을수록 시작 시간이 선형으로 늘어난다.

HMR(Hot Module Replacement)도 마찬가지다. 파일 하나를 수정하면 해당 모듈과 연결된 의존성을 다시 번들링해서 브라우저로 보낸다. 규모가 커질수록 반응 속도가 느려진다.

Vite가 빠른 이유

Vite는 두 가지로 이 문제를 해결한다.

사전 번들링은 esbuild로 처리한다. node_modules 안의 서드파티 라이브러리는 자주 바뀌지 않는다. Vite는 서버 시작 시 이 부분만 esbuild로 미리 번들링한다. esbuild는 Go로 작성되어 webpack보다 10~100배 빠르다.

소스 코드는 번들링하지 않는다. 브라우저가 네이티브 ES Module(ESM)을 지원하기 때문에, 소스 파일을 그대로 브라우저에 제공한다. 브라우저가 필요한 파일을 직접 요청하는 방식이라 전체를 번들링할 필요가 없다.

HMR도 변경된 파일 하나만 교체한다. 프로젝트 크기와 무관하게 응답 속도가 일정하다.