Vite는 빠른것을 뜻하는 프랑스어에서 유래되었다고 한다.
Vite는 vue.js의 창시자인 Evan Tou가 만든 차세대 프론트엔드 빌드 툴이다.
기존의 Webpack, Parcel등이 번들링을 중심으로 개발 서버를 구성했다면, Vite는 ESM(ECMAScript Module) 기반으로 번들 없이도 작동 가능한 개발 환경을 제공한다.
핵심은 매우 단순하다.
필요한 모듈만, 필요한 순간에, 번들 없이 브라우저에게 제공한다.
개발 서버에서의 vite
1. 매우 빠른 시작 속도
Webpack은 모든 파일을 번들링한 후 개발 서버를 시작하는 반면, Vite는 필요한 파일만 즉시 로딩하여 시작 속도가 매우 빠르다.
2. ES 모듈 지원
Vite는 개발 서버에서 번들링 없이 ES 모듈 기반으로 브라우저에 직접 JS 파일을 제공한다. 이 덕분에 초기 빌드 없이도 빠르게 개발 서버를 시작할 수 있다.
런타임 시점에서 동작하는 Common JS와 다르게 ES모듈을 사용하면 컴파일 시점(빌드 전)에 사용 가능하다.
3. HMR(Hot Module Replacement) 성능 향상
모듈 단위로 변경 사항을 반영하기 때문에 페이지 전체 리로딩 없이 변경된 부분만 빠르게 반영된다. 대규모 프로젝트에서도 HMR 성능 저하가 덜하다고 한다.
npm 모듈은 어떻게 처리될까?
브라우저는 import React from 'react' 처럼 패키지 명을 직접 인식할 수는 없다.
그래서 vite는 아래와 같은 방식으로 해결한다.
node_modules/react의package.json파일을 파싱"module"또는"export"필드를 기반으로 엔트리 파일 파악/@fs/node_modules/react/index.js같은 프록시 경로를 생성해서 응답.
즉, 개발 중에는 npm 패키지조차 ESM으로 변환하여 가짜 URL 경로로 응답한다.
브라우저는 상대결로 또는 절대경로로만 모듈을 인식할 수 있는데 node_modules에 있는 모듈을 어디에 있는지, 어떻게 불러와야할 지 추론할 수 있는 방법이 없다.
// 개발자가 작성
import React from 'react';
// Vite가 처리한 결과 (브라우저에 응답됨)
import React from '/@modules/react.js'; // 실제로는 서버가 제공하는 프록시 경로따라서 위와 같이 브라우저가 이해할 수 있도록 가짜경로로 변환한다.
vite의 프로덕션 빌드
1. 모듈 그래프
vite는 내부적으로 프로덕션 빌드 시 Rollup을 사용한다.
그럼에도 불구하고 빠른 이유는 미리 분석된 모듈 그래프를 재사용한다.
개발 중에 vite는 이미 모듈 그래프를 구축해놓은 상태고 이걸 기반으로 빌드 시 불필요한 트레 쉐이킹이나 의존성 재탐색을 줄인다.
Rollup은 ESM 기반 모듈을 정적으로 분석해서, 필요한 것만 포함된 가볍고 깔끔한 번들을 만들어주는 빌드 도구이다.
2. esbuild를 사전 최적화 단계에서 사용
optimizeDeps 단계에서 esbuild가 빠르게 사전 번들링을 진행한다.
일반적으로 node_modules안의 패키키지들은 CommonJs거나 크고 복잡하다.
또한 Vite는 개발 시작 전에 esbuild를 사용해 외부 의존성들을 한 번에 ESM으로 변환해서 캐시에 저장한다. 이 덕분에 빌드 시에 외부 의존성들이 이미 준비된 상태이다.
esbuild는 Go언어로 작성되어 있어 webpack보다 수십배 빠름
3. Rollup 플러그인 에코시스템을 그대로 사용
Vite는 Rollup 플러그인을 그대로 가져다쓰기 때문에 코드 스플릿팅, 트리 쉐이킹, 동적 import처리 등을 최적화된 방식으로 수행한다.
즉 Webpack의 복잡한 설정 없이도 효율적인 빌드를 기본으로 제공하는 구조이다.
