Vite가 무엇일까

Vite

• Vue.js를 만든 Evan You가 Esbuild기반으로 만들어진 개발도구
• 처음 출시에는 Vue.js와 함께 사용할 수 있었지만 현재 React, Svelte와 같은 다른 FrontEnd Framework나 Library에도 사용이 가능함

특징

HMR(Hot Module Replacement)

• 앱을 종료하지 않고 갱신된 파일만을 교체하는 방식(Node.js를 이용한 서버를 만들 때 Nodemon과 같이 코드를 수정하면 자동적으로 수정된 내용을 적용하여 실행)
• Vite의 경우 ESM을 이용하여 HMR을 지원함
  • 어떠한 모듈이 수정되면 전체적인 코드를 갱신하지 않고 수정된 모듈과 관련된 부분만을 교체 후 적용
  • 일부 번들러의 경우 메모리 상에서 실제로 갱신에 영향이 있는 파일만을 번들링하지만 이 방법 역시 처음 모든 파일에 대한 번들링을 진행해야 하는 부분이 있다.

서버 실행

• 번들러 기반 도구의 경우 Application 내의 모든 소스 코드에 대해 크롤링 및 빌드 작업을 마쳐야 실제 페이지를 제공 할 수 있었음
• vite의 경우 코드를 dependencies, source code 두 가지로 나누어 개발 서버를 시작함으로써 빠른 구동 시간을 가짐

번들링

• Esbuild는 빠른 속도로 번들링이 가능하지만 번들링에 필수 기능인 코드분할과 CSS와 관련된 처리가 아직 불안정 하기 때문에 현재 Production 빌드시에는 사용되지 않음
• production 빌드시 Rollup을 이용하여 빌드를 지원하고 있으며 해당 부분에 대해서는 Esbuild가 안정화 됐을 경우 변경될 가능성이 있다.

Webpack, Vite 비교해보기

가장 똑같은 환경과 세팅을 비교하기 위해 추가적인 Library 없이 기본적인 react project만 생성하여 비교했다

폴더 구조

vite

vite 프로젝트 폴더 구조

webpack

webpack 프로젝트 폴더 구조

webpack과 vite의 다른 점

• vite는 기존 public 폴더가 아닌 상단에 index.html이 존재한다.
• vite.config.ts파일이 자동으로 생성된다.

package.json

webpack

webpack package.json

vite

vite package.json

• webpack의 경우 react-scripts명령어를 이용하여 서버를 실행하거나 빌드하지만 vite의 경우 vite명령어를 사용하기 때문에 서로의 dependencies가 차이가 발생하며 vite의 경우 tsc를 통해 typescript코드를 컴파일 후 빌드를 진행한다.

build 되었을 때 사이즈 비교

두 개의 프로젝트 생성 시 css, tsx파일, test를 위한 파일 등의 차이점이 있어 test와 관련된 부분은 제거, css, tsx파일의 경우 기존 cra의 내용을 vite파일에 복사하여 비교했다.

webpack

 

webpack 번들링 사이즈

 

vite

vite 번들링 사이즈

• 빌드가 되는 속도는 vite가 매우 빠르게 완료되었으며 build된 서로의 파일 중에서 js, css만 gzip 용량을 비교하였을 경우를 테이블로 비교하여 한눈에 확인했을 때프로젝트 생성 후 만들어지는 기본적인 내용만을 가지고 비교하여 차이값이 근소하지만 vite가 앞서는 것을 확인했다.

	css	js
webpack	0.54Kb	45.65kb
vite	0.47Kb	45.28Kb

속도

• 실행의 경우 vite가 1122ms로 매우 빠른 속도를 보여주었으며 webpack은 실행되기까지의 소요 시간을 볼 수 없었지만 vite와 비교했을 때 체감상으로 느껴질 만큼 더 많은 시간이 소요되었다.

정리

현재 기본적인 프로젝트 생성으로만 두 번들러의 용량 속도 등을 비교했지만 절대 vite가 좋다는 것이 아닌 걸 알아야 한다

프로젝트의 규모나 기능적인 측면에서는 아직 webpack이 안정화되어 있는 부분이 많기 때문에 vite를 사용하기보단 webpack을 사용하여 개발을 진행하는 것도 고려해야 하며 처음 프로젝트를 시작할 때 충분히 모든 사항을 고려해서 선택 후 개발을 진행해야 할 것이다