Vite 빌드 시스템 깊이 이해하기
Vite는 어떤 빌드 시스템인가요?
Vite(비트)는 ES 모듈(ESM) 기반의 개발 서버와 Rollup 기반의 프로덕션 빌드 도구를 통합한 프론트엔드 빌드 시스템입니다. 개발 환경에서는 네이티브 ESM을 직접 브라우저에 제공하여 콜드 스타트 시간을 3초 이내로 단축하며, 프로덕션 환경에서는 Rollup을 활용해 최적화된 번들을 생성합니다. Node.js 14.18 이상을 기본 지원하며, 2020년 Evan You에 의해 초기 개발되어 현재 Vue, React, Svelte 등 주요 프레임워크에서 공식 스캐폴딩 도구로 채택됐습니다.
Vite의 개발 서버는 어떻게 작동하나요?
Vite의 개발 서버는 전통적인 번들러와 근본적으로 다른 아키텍처를 채택합니다. 소스 코드를 미리 번들링하지 않고, 브라우저의 네이티브 ESM 요청에 응답하는 온디맨드(On-Demand) 변환 방식을 사용합니다.
요청 흐름
- 브라우저가
<script type="module" src="/src/main.js"></script>를 로드하면, Vite 개발 서버가 해당 파일을 인터셉트합니다. - 서버는 TypeScript, JSX, Vue SFC(Single File Component) 등 원본 파일을 즉시 JavaScript로 변환(트랜스파일)합니다.
- 변환된 모듈을 브라우저에 반환하며, 각 임포트 경로는
/@fs/또는/@modules/프리픽스로 정규화됩니다. - 브라우저는 임포트된 각 모듈을 재귀적으로 요청하고, 서버는 각각을 독립적으로 변환 후 전송합니다.
성능 특성
| 항목 | 수치 | 비고 |
|---|---|---|
| 콜드 스타트 시간 | 0.5~3초 | webpack 대비 10~100배 빠름 |
| 핫 모듈 교체(HMR) 완료 시간 | 50~300ms | 파일 크기와 의존도 수에 따라 변동 |
| 메모리 사용량 | 100~300MB | 일반적인 중규모 프로젝트 기준 |
| 동시 모듈 요청 수 | 브라우저 제한 (보통 6~8개) | 서버는 요청 큐 관리 |
Vite는 의존성 파일(node_modules)을 별도로 사전 번들링합니다. esbuild를 사용해 CommonJS 모듈을 ESM으로 변환하고, 선택적 동적 임포트를 정적으로 분석하여 필요한 의존성만 미리 번들합니다. 이를 통해 첫 로드 시 과도한 네트워크 요청을 방지합니다.
Vite의 프로덕션 빌드는 어떻게 최적화되나요?
Vite의 프로덕션 빌드는 Rollup을 기반으로 하며, 코드 분할, 트리 쉐이킹(Tree Shaking), 동적 임포트 청크 분리 등을 자동으로 처리합니다.
빌드 파이프라인
- 사전 최적화: 의존성 번들을 별도 청크로 분리(vendor split) —
node_modules파일은vendor.xxxxx.js로, 애플리케이션 코드는index.xxxxx.js로 생성됩니다. - 코드 분할: 동적
import()를 감지해 자동으로 청크 경계를 설정합니다. 예:import('./views/About.vue')는About.xxxxx.js청크를 생성합니다. - 트리 쉐이킹: 미사용 export를 식별하고 제거합니다. ES 모듈의 정적 구조를 활용하므로 CommonJS 의존성보다 효율이 높습니다.
- 프리로드/프리페치 지시: 중요 청크는
<link rel="preload">, 보조 청크는<link rel="prefetch">로 자동 주입됩니다. - 소스맵 생성: 프로덕션 환경에서도
.map파일을 생성하여 에러 추적을 지원합니다(선택적).
번들 크기 최적화
기본 vite.config.js 설정 하에서 React + 라우터 + HTTP 클라이언트 프로젝트 기준:
| 청크 | 크기 (gzip 압축 후) | 내용 |
|---|---|---|
| vendor.js | 85~120KB | react, react-dom, 의존성 |
| index.js | 15~35KB | 애플리케이션 코드 |
| 동적 라우트 청크 | 5~20KB | 페이지별 컴포넌트 |
Vite는 롤업의 manualChunks 옵션으로 세밀한 청크 분할을 지원하며, vitejs/plugin-legacy를 통해 IE 11 호환성도 제공합니다.
Vite를 실제 프로젝트에 적용한 사례는 어떻게 되나요?
Vue 3 기반 대규모 관리 시스템
국내 핀테크 기업의 어드민 플랫폼(약 80개 페이지, 300+ 컴포넌트)에서 Webpack 5에서 Vite로 마이그레이션한 사례입니다. 개발 서버 시작 시간이 45초에서 2.3초로 단축됐으며, 파일 저장 후 HMR 반영 시간은 8초에서 150ms로 개선됐습니다. 프로덕션 번들 크기는 webpack의 최적화 설정과 동등한 수준(약 145KB gzip)을 유지했습니다.
Next.js 기반 전자상거래 플랫폼
React 프레임워크 진영에서도 Vite 기반의 경량 대안들이 등장했습니다. Astro, SvelteKit 등 신규 메타프레임워크는 모두 Vite를 핵심 빌드 도구로 채택했으며, AWS Amplify, Vercel 등 배포 플랫폼도 Vite 프로젝트를 우선 지원합니다.
모노레포 환경
Turbopack, Nx와 같은 모노레포 도구들도 Vite 호환성을 강조하고 있습니다. 특히 Vite의 플러그인 시스템이 Rollup과 동일한 인터페이스를 유지하므로, 커뮤니티 플러그인 생태계(200+ 공식 및 커뮤니티 플러그인)가 빠르게 확대되고 있습니다.
정리하면 Vite의 핵심 특성은 어떻게 되나요?
Vite는 ES 모듈의 네이티브 지원을 활용해 개발 환경에서 극도로 빠른 피드백 루프를 제공합니다. 콜드 스타트 3초 이내, HMR 50~300ms의 응답성은 개발자 생산성을 크게 향상시킵니다. 프로덕션 빌드는 Rollup 기반으로 기존 번들러와 동등한 수준의 번들 크기와 성능 최적화를 보장합니다. 플러그인 시스템과 프레임워크 통합이 성숙하며, 특히 Vue, React, Svelte 등 주요 프레임워크의 공식 스캐폴딩 도구로 채택되어 커뮤니티 안정성과 장기 유지보수성이 확보된 상태입니다.
자주 묻는 질문
Vite가 CommonJS 모듈을 지원하나요?
Vite는 ESM을 기본으로 하지만, node_modules의 CommonJS 패키지는 자동으로 ESM으로 변환합니다. esbuild를 활용한 사전 번들링 과정에서 require()를 import로 변환하므로, 개발자는 별도 설정 없이 CommonJS 의존성을 사용할 수 있습니다. 단, 동적 require() 패턴(예: require(variable))은 정적 분석 불가능하므로 수동으로 vite.config.js의 optimizeDeps.include 배열에 명시해야 합니다.
Vite로 빌드한 번들이 구 브라우저에서 동작하나요?
Vite가 생성한 코드는 기본적으로 ES2020 문법을 포함합니다(화살표 함수, 옵셔널 체이닝 등). IE 11 호환성이 필요하면 vitejs/plugin-legacy 플러그인을 설치하여 vite.config.js에 추가합니다. 해당 플러그인은 현대 브라우저용 ESM 번들과 구 브라우저용 UMD(Universal Module Definition) 번들을 동시 생성하며, 브라우저 버전에 따라 자동으로 적절한 버전을 로드합니다. 프로덕션 번들 크기는 약 1.2~1.5배 증가합니다.
Vite로 생성한 청크 파일 캐싱은 어떻게 관리되나요?
Vite는 프로덕션 빌드 시 콘텐츠 기반 해싱을 사용하여 파일명에 해시값을 포함시킵니다(예: index.a3b2c1d4.js). 파일 내용이 변경되지 않으면 해시값도 동일하므로, 브라우저 캐시가 유효합니다. 의존성 청크(vendor.js)는 코드 변경 빈도가 낮으므로 별도 청크로 분리해 캐시 효율을 높입니다. 개발 환경에서는 강제 캐시 무효화 헤더(Cache-Control: no-cache)를 자동 적용하므로, 파일 저장 직후 즉시 변경사항을 확인할 수 있습니다.
Vite 프로젝트의 빌드 시간은 어느 정도인가요?
프로젝트 규모와 의존성 복잡도에 따라 크게 달라집니다. 소규모 프로젝트(단일 페이지, 의존성 10개 이하)는 13초, 중규모 프로젝트(50100개 컴포넌트, 의존성 50100개)는 515초, 대규모 모노레포(300+ 컴포넌트, 200+ 의존성)는 2060초가 소요됩니다. 빌드 병목은 주로 TypeScript 타입 체크, 이미지 최적화, CSS 전처리기 컴파일입니다. vite.config.js의 build.minify 옵션을 false로 설정하면 축소화 단계를 생략해 빌드 시간을 3040% 단축할 수 있습니다(프로덕션 환경에서는 권장되지 않음).
Vite와 번들러 선택 시 고려해야 할 사항은 무엇인가요?
Vite는 현대적 ES 모듈 환경과 빠른 개발 피드백을 우선시합니다. 반면 Webpack은 복잡한 빌드 파이프라인과 레거시 환경 지원에 강하며, esbuild는 순수 번들링 속도에 최적화됐습니다. Vite 선택 기준: Vue/React 신규 프로젝트, 개발 생산성 우선, Node.js 14.18 이상 환경. Webpack 유지 기준: 복잡한 커스텀 로더 필요, IE 11 필수 지원, 기존 설정 자산 활용. esbuild 선택 기준: 순수 JavaScript 빌드, 최소 설정, CLI 기반 단순 번들링.