React 프로젝트를 시작할 때 많이 쓰이는 CRA와 Vite를 비교해봅니다.

CRA의 문제는 번들링에 있습니다. CRA는 Webpack을 사용해서 모듈을 번들링합니다. 서버를 시작해서 하나의 페이지를 보기까지 모든 파일을 번들링하는 과정이 먼저 일어나기 때문에 서버를 시작하고 이를 개발자에게 보여주기까지의 시간이 오래 걸립니다.

위 그림을 보시면 entry point에서 모듈을 다 타고 내려가서 모두 가져오고 이를 번들링한 후에야 서버가 Ready 상태가 되고 이때 페이지에 접근할 수 있습니다.

Vite는 브라우저 ESM(ECMA Script Module)을 기반으로 합니다. 이는 다시말해서 브라우저가 곧 번들러라는 뜻과 같습니다. Vite는 브라우저가 필요한 모듈에 대한 소스코드를 요청하면 이를 전달합니다.

HTTP Request가 오면 필요한 부분의 모듈을 조합해서 화면에 바로 렌더링하게 됩니다. 따라서 서버를 키고 하나의 페이지에 접근해서 렌더링하기까지의 시간이 매우 빠릅니다. 필요하지 않은 모듈은 불러오지 않기 때문입니다.

다시 CRA로 돌아와서 CRA의 Github 레포지토리를 확인해보면 가장 최근 버전의 릴리즈가 22년 4월이고 이는 1년 이상의 기간동안 버전 업이 없고, Outdated된 것을 확인할 수 있습니다.

또한 새로운 React 공식문서를 보면 CRA를 언급하지 않는 것을 확인할 수 있습니다.

최근 React 프로젝트는 Vite로 모두 대체되는 추세이고, Svelte도 Vite를 선택하면서 Vite는 꾸준히 성장하며 생태계를 넓혀나가고 있습니다.