지난 여름에 했던 프로젝트간 Vite를 사용했다. 요즘 많이 쓴다는 얘기만 듣고 사용했는데, 어떤 차이가 있는지 알아보고 한 걸음 더 성장해보잡!
CRA(Create React App)
Create React App(CRA)은 Facebook에서 개발한 React 프로젝트 생성 도구로, 빠르게 React 애플리케이션을 시작하고 설정할 수 있는 환경을 제공한다.
CRA를 사용하면 React 애플리케이션을 개발하는데 필요한 기본적인 설정들을 미리 구성해주며, 별도의 설정 없이도 프로젝트를 바로 시작할 수 있다.
CRA는 Webpack을 기본 번들러로 사용하고, Babel, ESLint 등 여러 도구들을 내장하여 개발자가 기술적인 설정을 하지 않아도 프로젝트를 빠르게 시작할 수 있게 도와준다.
또한, 개발 중 실시간으로 변경된 내용을 확인할 수 있는 HMR(Hot Module Replacement) 기능도 지원한다.
CRA 공홈
Vite
반면, Vite는 Rollup을 사용하여 빌드를 처리한다.
(Rollup은 자바스크립트 앱을 빌드하고 번들링하는 도구이며, 번들 크기를 최소화하고 최적화하는 도구라고 한다!)
Vite의 빌드 시스템은 ES 모듈을 기반으로 동작하는데, 이 방식은 필요한 모듈만을 로드하기 때문에 초기 빌드가 훨씬 빨라진다.
또한, Vite는 빌드 시 esbuild를 사용하여 빠르고 효율적으로 처리한다.
HMR(Hot Module Replcaement)를 지원하여 수정된 모듈만 다시 로드하여 수정사항을 실시간으로 반영해준다.
CRA와 Vite 차이 (직접 비교해보자)
- 빌드시간
- CRA와 Vite는 빌드의 시간차이가 존재한다.
- CRA는 Webpack 기반으로 애플리케이션을 빌드하고 있지만,
- Webpack은 번들링 과정에서 파일의 의존 관계를 모두 처리해야 하므로 초기 빌드와 수정 후 재빌드가 느려지는 경향이 있다.
- Vite는 빠른 빌드 시간을 제공하기 위해 Rollup으로 애플리케이션을 빌드한다.
- 실제 내가 작성한 프로젝트를 가지고 CRA와 Vite를 사용했을때 빌드 시간을 비교해봤다.
CRA (17.46초)
Vite (5.5초)
- 배포 환경이 아닌 로컬에서 테스트 했을때도 유의미하게 차이가 나는데,
- 실제 배포를 하기 위한 빌드 과정이거나 규모가 더 큰 프로젝트라면 훨씬 차이가 눈에 띌 것 같다.
- 번들링
- CRA는 Webpack을 사용하여 번들링을 처리한다.
- Webpack은 파일 의존성에 따라 전체 파일을 번들링하기에 결과적으로 번들 크기가 커질 수 있다.
- 그 결과로, 로딩 시간이나 성능에 영향이 있을 수 있다.
- Vite는 Rollup과 Esbuild을 사용하여 번들링한다.
- Rollup은 의존성 최적화와 트리 쉐이킹(Tree Shaking)을 통해 불필요한 코드를 제거한다.
- esbuild는 빠른 번들링을 통해 번들 크기를 최적화한다.
- 이로 인해 Vite는 번들링 속도가 빠르며 번들 크기도 최적화되어 로딩 시간이 대폭 개선되는 효과가 있다.
잠깐!
Tree Shaking⁉️
트리 쉐이킹 (Tree Shaking)은 자바스크립트 번들링 과정에서 사용되지 않는 코드를 제거하는 최적화 기법이며, 주로 ES 모듈(ESM)을 사용할 때 효과적이다.
어떻게 동작해❓
트리 쉐이킹은 코드에서 실제로 사용되지 않는 함수, 변수, 또는 모듈을 제거하여 최종 번들의 크기를 줄이는 역할을 한다.
이는 코드에서 "죽은" (dead) 코드를 제거함으로써 로딩 속도를 개선하고, 최종 결과물이 더 작고 효율적이게 만드는 데 도움을 준다.
결론 (Vite를 사용한 이유!)
Vite는 초기 빌드와 번들링 속도가 매우 빠르다.
Vite가 ES 모듈을 기반으로 동작하며, esbuild를 사용하여 JavaScript 코드를 빠르게 처리하고,
Rollup을 활용하여 번들 최적화와 의존성 관리를 효율적으로 하기 때문이다.
잠깐!
의존성 관리⁉️
프로젝트에서 사용하는 외부 라이브러리나 모듈들이 서로 어떻게 연결되고, 어떤 순서로 로드되는지 관리하는 과정이다.
이는 프로젝트에서 사용하는 다양한 외부 코드들이 제대로 동작하도록 하고, 서로 충돌하거나 누락되는 일이 없도록 하는 중요한 작업이다.
Vite에서 의존성 관리는 주로 Rollup을 통해 이루어지는데 이는 각 모듈 간의 의존성을 분석하고, 최적화된 방식으로 모듈들을 번들링하여 효율적으로 로드할 수 있도록 해준다.
추가적으로 공부한 기술적인 이해를 바탕으로 Vite를 선택한 이유를 정리해보자면,
단순히 "빠르다"는 이유만은 아니게 되었다.
'왜 빠른지'에 대한 생각을 해볼 수 있었다.
프로젝트 규모가 커지거나 배포 환경에서는 성능 차이가 좀 더 명확해진다.
Vite가 제공하는 빠른 빌드 시간, 최적화된 번들 크기가 개발과 배포 속도를 크게 개선할 수 있다는 점이 가장 큰 장점이고, 그러한 장점을 가지는 이유는 위와 같은 이유 때문일 것이다.
