핵심 요약
Turbopack 1.0이 안정 GA(2026-04), Vite 6도 같은 시기 출시. 같은 코드베이스(Next.js 16 호환 SPA + RSC 일부 미러링)를 두 도구로 빌드 비교한 결과.
1. 측정 환경
- 5,127 모듈 / 220K LOC / TS
- M2 Pro 12코어 / 32GB
- 의존성: React 19.2, Tailwind v4, framer-motion, recharts 등
2. 결과 요약
| 지표 | Vite 6 | Turbopack 1.0 | Webpack 5 |
|---|---|---|---|
| dev cold start | 1.4s | 0.7s | 14.8s |
| dev warm start | 0.8s | 0.4s | 10.2s |
| HMR 평균 | 72ms | 48ms | 820ms |
| prod build | 38s | 52s | 92s |
| prod bundle | 1.46MB | 1.62MB | 1.51MB |
| tree-shaking 정확도 | ★★★★★ | ★★★★ | ★★★★★ |
| 메모리 peak (dev) | 620MB | 1.2GB | 1.8GB |
3. 강점 분석 — Vite 6
- esbuild + Rolldown(Rust 기반 새 번들러) 조합. dev는 esbuild, prod는 Rolldown
- 플러그인 생태계 압도적 (vite-plugin-*)
- SSR · SPA · 모노레포 등 어디든 잘 맞음
- tree-shaking 결과가 가장 작음 (Rolldown 효과)
4. 강점 분석 — Turbopack 1.0
- Next.js와 완전 통합 (App Router 최적화)
- 변경 추적이 함수 단위 — HMR이 가장 빠름
- RSC·서버 컴포넌트 처리 자체에 더 빠른 경로
- 대용량 모노레포에서 콜드 스타트 우위
5. 약점 — Vite 6
- Next.js 사용자라면 도구 교체 비용 큼
- 대규모 RSC 워크로드는 직접 최적화 필요
6. 약점 — Turbopack 1.0
- Next.js 외부 사용 사실상 불가
- 플러그인 생태계 부족 (점진 확대 중)
- 메모리 사용 큼 — 16GB 미만 머신은 어려움
- prod build가 의외로 Vite보다 느림 (incremental 캐시 비활성 시)
7. HMR 디테일
50개 파일에 각각 한 줄씩 수정 후 평균.
| 도구 | 변경 → 화면 반영 |
|---|---|
| Vite 6 (HMR 정밀) | 72ms |
| Turbopack 1.0 | 48ms |
| Webpack 5 (hot middleware) | 820ms |
둘 다 사람 인지 한계(~100ms) 이내. 차이가 체감되진 않음.
8. 결정 가이드
| 상황 | 추천 |
|---|---|
| Next.js App Router | Turbopack (next-15.4+ 기본) |
| React Router·Remix·SPA | Vite 6 |
| Vue·Svelte·Solid 등 | Vite 6 |
| SSR 직접 구성 | Vite 6 |
| 마이크로프론트엔드 | Vite 6 (module federation 호환) |
9. 마이그레이션 비용
- Webpack → Vite: 평균 1~2주 (플러그인 매핑)
- Webpack → Turbopack(Next.js): 0~1일 (Next.js 사용 중이면 옵션 켜기)
- Vite → Turbopack: Next.js로 갈 거면 같이
10. 흔한 함정
- SVG 컴포넌트 처리: 도구마다 다름 — 마이그레이션 시 plugin 매핑
- CSS Modules: 둘 다 지원하지만 옵션 다름
- environment variables: Vite는
VITE_prefix, Turbopack/Next.js는NEXT_PUBLIC_ - type checking: 둘 다 빌드에서 직접 안 함.
tsc --noEmit를 별도 파이프라인
참고
- vitejs.dev/blog/announcing-vite-6.0
- turbo.build/pack/docs — 1.0 release
댓글 0