Vite 개요와 작동 원리 — ESM 기반 개발 서버, esbuild 프리번들, Rollup 빌드

개요

차세대 프론트엔드 빌드 도구 Vite 요약 Vue.js 창시자 Evan You가 만들었고, 개발 중 대기 시간을 줄이는 데 초점 맞춤 프랑스어로 vite는 빠름을 의미함

핵심 가치

• 개발 서버 즉시 기동에 가까운 체감 속도
• HMR이 가볍고 빠르게 동작
• 의존성 프리번들을 esbuild로 처리해 개발 경험 가속
• 프로덕션 빌드는 Rollup으로 안정적 번들 생성

배경과 문제

기존 번들러(Webpack) 방식은 시작 시 전체 그래프를 사전 번들링하는 구조

• 프로젝트 규모가 커질수록 첫 기동이 지연
• 코드 변경 반영 또한 번들 재생성 비용으로 지연 발생

개발 체감 문제

• 개발 서버 시작 수십 초 이상 소요되는 케이스 빈번
• 단순 수정에도 수 초 단위 대기 발생

핵심 개념

1. Native ESM 기반 개발 서버 브라우저가 import/export를 네이티브로 처리 Vite는 원본 모듈을 그대로 서빙하고, 브라우저가 필요한 모듈만 on-demand로 요청하는 흐름 프로젝트 크기와 무관하게 첫 요청까지의 대기 시간이 매우 짧게 유지되는 경향

예시

<script type="module" src="/src/main.js"></script>

// 브라우저가 직접 의존 모듈을 가져감
import { createApp } from 'vue'
import App from './App.vue'

2. HMR(Hot Module Replacement) 페이지 전체 리로드 없이 변경 모듈만 대체

• 전체 번들 재생성 없음
• 변경 모듈과 영향 범위만 빠르게 갱신
• 체감 반응 시간이 수십 ms 수준으로 안정적

3. esbuild 기반 사전 번들링 node_modules 의존성은 esbuild로 프리번들 처리

• esbuild는 Go로 구현되어 일반 JS 번들러 대비 10~100배 수준의 처리 속도 보고됨
• 의존성 변경 빈도가 낮아 캐시 효과 큼
• 초기 요청시 의존성 로딩에 대한 오버헤드 축소

개발과 프로덕션의 분리

개발은 ESM 서빙 + esbuild 프리번들, 프로덕션은 Rollup 최적화 번들 생성

명령 예시

npm run dev    # 개발 서버
npm run build  # 프로덕션 빌드

Webpack 대비 비교 포인트

설정 예시

기본 설정만으로도 충분한 케이스 다수, 필요시 플러그인과 서버 옵션 정도 확장

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: { port: 3000 },
  build: { outDir: 'dist' },
})

지원 범위

• 프레임워크: React, Vue, Svelte, Preact, Lit 등 주요 프레임워크 지원
• 언어: TypeScript, JSX, TSX를 추가 설정 없이 사용 가능
• CSS: CSS Modules, Sass, Less, PostCSS 파이프라인 지원
• 정적 자산: 이미지, 폰트, JSON 등 자산 로딩 처리

Vitest와의 관계

Vitest는 Vite의 변환 파이프라인을 재사용하는 테스트 프레임워크

• vite.config 공유 가능, 설정 일관성 유지
• ESM 기반 변환과 캐시 이득을 그대로 활용
• Vite 프로젝트에서 바로 도입 가능, 실행 속도 면에서 유리

주의와 베스트 프랙티스

• 개발과 배포의 동작 경로가 다름을 전제로 검증 플로우 분리 권장
  • 개발은 ESM 직서빙, 배포는 Rollup 번들 결과물 기준 검증 필요
• 대형 의존성은 프리번들 캐시를 활용하되, 의존성 업데이트 시 캐시 무효화 동작 확인 권장
• HMR 경계 모듈에서 상태 보존 이슈가 있을 수 있으므로, 상태 관리 계층의 갱신 전략 점검 필요
• 경로 별칭, 환경 변수, 자산 처리 등은 기본값으로 충분하나 팀 컨벤션에 맞는 최소 설정만 추가 권장

요약

• Native ESM으로 즉시 기동에 가까운 개발 경험 제공
• HMR은 변경 모듈 중심으로 가벼운 교체 수행
• esbuild로 의존성 프리번들링, 캐싱으로 반복 비용 절감
• 프로덕션은 Rollup으로 최적화된 번들 생성
• 설정 부담 낮고, 주요 프레임워크와 언어 지원 폭넓음

한 줄 요약 Vite = 개발 중 기다림을 최소화하는 ESM 중심 빌드 도구

참고자료

• https://vitejs.dev/guide/
• https://vitejs.dev/guide/why.html
• https://esbuild.github.io/
• https://rollupjs.org/
• https://vitest.dev/