tooling
Vite.
ESM native dev server, esbuild, Rollup production build, Webpack과의 차이.
Vite는 dev에서 브라우저 native ESM으로 빠른 cold start, prod에서 Rollup으로 번들하는 차세대 프론트 빌드 도구입니다.
🔀 Dev vs Prod
| Development | Production | |
|---|---|---|
| 변환 | esbuild (Go, 매우 빠름) | Rollup |
| 서빙 | 요청 시 on-the-fly transform | pre-bundle |
| HMR | ESM 기반 precise update | N/A |
- dev: 전체 번들 X → 필요한 모듈만 transform
node_modulesdependency는 esbuild로 pre-bundle (CJS 호환)
⚖️ Webpack과 비교
| Webpack | Vite | |
|---|---|---|
| dev 시작 | 전체 그래프 분석 → 느림 | instant |
| config | 유연, 복잡 | 간결, convention |
| ecosystem | 거대 | Vue/React/Svelte 1급 |
- Next.js Turbopack — 비슷한 "dev 빠르게" 방향 (Rust)
⚙️ 설정
vite.config.ts: alias, proxy, plugin (React, SVGR)- Vitest — Vite config 공유 테스트
- SSR:
vite build --ssr - library mode — npm package 배포용 build
🔗 참고 자료
- Getting Started — Vite 설치와 기본 사용법을 설명한다.
- Why Vite — esbuild 기반 개발 서버의 이유를 설명한다.
- Features — HMR, TypeScript, CSS 등 기능을 설명한다.
- Configuring Vite —
vite.config옵션을 설명한다.