왜 우리는 Vite를 쓰는가? (esbuild, Turbopack, Rolldown 비교)

1. 문서 제목

• 왜 우리는 Vite를 쓰는가? (esbuild, Turbopack, Rolldown 비교)

---

2. 기술 개요 요약

프론트엔드 빌드 도구는 성능과 개발 경험(DX)을 중심으로 빠르게 진화해왔습니다.
esbuild는 Go 기반의 초고속 번들러로 “속도 혁명”을 이끌었고,
Vite는 이를 활용해 개발 서버 경험을 극적으로 개선한 도구입니다.

이후 Turbopack은 Rust 기반의 증분 빌드 전략으로 새로운 접근을 제시했고,
최근에는 Vite의 구조적 한계를 해결하기 위해 Rolldown이 등장했습니다.

핵심 흐름은 다음과 같습니다:

Webpack → esbuild (속도 혁명) → Vite (DX 혁신) → Turbopack (증분 빌드) → Rolldown (통합 엔진)

---

3. 핵심 개념 정리

3.1 Vite의 구조 (핵심 이해 포인트)

✔️ "이중 엔진 구조"

구분	개발 모드	프로덕션 빌드
엔진	esbuild	Rollup
목적	빠른 서버 구동, HMR	최적화된 번들 생성
특징	즉각적인 반영 속도	안정적이고 정교한 번들링

✔️ 왜 이렇게 설계됐나?

• esbuild → 빠르지만 번들링 기능은 제한적
• Rollup → 느리지만 번들 품질이 뛰어남

👉 결과: 속도 + 품질을 동시에 잡기 위한 하이브리드 구조

---

3.2 esbuild의 특징

✔️ 핵심 포인트

• Go 기반 네이티브 실행
• 병렬 처리 기반 초고속 빌드
• 최소한의 기능 (빠른 대신 단순)

✔️ 한계

• 플러그인 생태계 제한적
• 고급 번들링 기능 부족

---

3.3 Turbopack의 특징

✔️ 핵심 포인트

• Rust 기반
• 증분 빌드 (Incremental Computation)
• 변경된 부분만 다시 빌드

✔️ 전략

“전체를 다시 빌드하지 말고, 바뀐 것만 계산하자”

✔️ 한계

• Next.js 의존성 높음
• 아직 생태계 성숙도 부족

---

3.4 Rolldown의 등장 배경

✔️ 기존 Vite의 문제

1. 개발 / 빌드 엔진이 다름
2. 환경 불일치 문제 발생
3. Rollup의 속도 한계

---

3.5 Rolldown의 핵심 특징

✔️ 1. 단일 엔진 (Unified Engine)

• 개발 + 빌드 모두 동일 엔진 사용
• 환경 차이 문제 제거

---

✔️ 2. Rust 기반 고성능

• 기존 Rollup 대비 10~30배 빠름
• 네이티브 실행

---

✔️ 3. Rollup 완벽 호환

• 기존 플러그인 그대로 사용 가능
• 마이그레이션 비용 최소화

---

✔️ 4. Oxc 생태계

• 초고속 AST 파서 사용
• 빌드 전 과정 성능 개선

---

3.6 전체 비교 요약

항목	esbuild	Turbopack	Rolldown
언어	Go	Rust	Rust
전략	병렬 처리	증분 빌드	통합 + 호환성
강점	속도	재빌드 성능	속도 + 안정성
생태계	제한적	제한적	Rollup 기반
포지션	엔진	프레임워크 (Next.js)	Vite 전용 엔진

---

4. 사용 예시 및 코드 스니펫

4.1 Vite 기본 설정

npm create vite@latest

// vite.config.ts
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    target: 'esnext'
  }
})

---

4.2 (미래) Rolldown 기반 Vite

export default defineConfig({
  build: {
    // 내부적으로 Rolldown 사용 (Vite 8+)
  }
})

👉 핵심: 설정 변경 없이 성능만 개선되는 방향

---

5. Best Practice / 주의사항

✔️ 1. 현재 기준 선택 전략

• 일반 SPA → Vite
• Next.js 기반 → Turbopack (선택적)
• 라이브러리 번들링 → Rollup or Vite

---

✔️ 2. Vite 사용 시 주의점

❗ 개발 / 빌드 환경 차이

• Dev에서는 정상, Build에서 에러 발생 가능
• (→ Rolldown으로 해결 예정)

---

❗ esbuild 호환성 이슈

• 일부 CJS/ESM 혼용 라이브러리 문제 발생
• 해결:
  • optimizeDeps 설정
  • alias 사용

---

✔️ 3. Rolldown 도입 시 기대 효과

• CI/CD 시간 단축
• 디버깅 비용 감소
• 일관된 실행 환경

---

6. 참고자료 / 공식 문서

• Vite 공식 문서: https://vitejs.dev
• esbuild 공식 문서: https://esbuild.github.io
• Turbopack (Next.js): https://nextjs.org/docs/architecture/turbopack
• Rolldown GitHub: https://github.com/rolldown/rolldown
• Oxc 프로젝트: https://oxc.rs

---

최종 한 줄 정리

esbuild는 속도를 만들었고, Vite는 경험을 만들었으며, Rolldown은 그 둘을 하나로 통합하고 있다.