build-tools · high priority
Vite vs Webpack — 번들러의 현재와 미래
ESM 네이티브 개발 서버로 번들링 패러다임 전환
intermediate 난이도3시간토스당근카카오네이버쿠팡
시작 전
이해도
매우 낮음
학습 개요
탄생 배경
쉬운 설명
복잡한 개념을 실생활 비유로 설명합니다.
“음식 배달 방식”
Webpack은 주문이 들어오기 전에 모든 재료를 미리 요리해서 도시락을 만들어 놓는 방식입니다. Vite는 주문이 들어오면 그때 필요한 재료만 빠르게 요리합니다. 재료가 많아질수록(앱이 커질수록) Webpack은 점점 느려지지만 Vite는 영향이 적습니다.
핵심 개념
Webpack vs Vite 개발 서버
Webpack 방식
- 시작 전 모든 소스를 하나의 번들로 합침
- 모듈 100개면 100개를 모두 처리
- 앱이 커질수록 시작 시간 증가
- HMR: 변경된 모듈의 의존 체인 재빌드
1// 개발 서버 시작 시2// 모든 파일을 번들로 합침3entry → [module1, module2, ...] → bundle.js
Vite 방식
- 브라우저가 ESM import를 직접 요청
- 요청된 파일만 변환해서 즉시 응답
- 앱 크기와 무관하게 빠른 시작
- HMR: 변경된 모듈만 교체 (밀리초)
1// 개발 서버 시작 시2// 번들링 없음!3// 브라우저가 필요할 때 파일 요청4import { app } from './app.js'5→ 서버가 app.js만 변환해서 응답
Vite 내부 동작
1
의존성 사전 번들링
esbuild로 node_modules를 단일 ESM 파일로 사전 번들링. 수백 개 모듈 요청 → 1개 요청으로 최적화
2
소스 코드 변환
브라우저 요청 시 해당 파일만 esbuild/Rollup 플러그인으로 변환 (TS, JSX, CSS)
3
ESM 직접 서빙
변환된 파일을 ESM으로 브라우저에 전달. 브라우저가 import 그래프를 직접 처리
4
HMR
파일 변경 감지 → WebSocket으로 브라우저에 알림 → 변경된 모듈만 교체
실무 적용
어떤 상황에서 사용하는가
CRA(Create React App) 프로젝트를 Vite로 마이그레이션
어떻게 적용하는가
vite-plugin-react 설치, index.html을 public에서 root로 이동, 환경변수 REACT_APP_ → VITE_, Jest → Vitest 마이그레이션. 개발 서버 시작 시간 10초 → 0.5초, HMR 3초 → 즉시 개선.
흔한 실수와 안티패턴
- CommonJS require()를 ESM import로 변경 필요
- 환경변수 접근 방식 차이 (process.env → import.meta.env)
- Jest에서 Vitest로 마이그레이션 시 일부 API 차이
- require.context → import.meta.glob 변경 필요
면접 질문
중급토스당근네이버
답변 방향 힌트
ESM, esbuild, 번들링 없음
반드시 언급할 키워드
- 개발 시 번들링 없음
- ESM 브라우저 직접 서빙
- esbuild로 의존성 사전 번들링
예상 꼬리 질문
- 프로덕션 빌드에서도 Vite가 Webpack보다 빠른가요?
- Turbopack(Next.js)은 어떤 방식인가요?