Vite 8.0

Vite 8.0 출시: 통합 툴체인 및 마이그레이션 가이드

2026년 3월 12일, Vite 8.0이 공식 출시되었습니다. 이번 메이저 버전의 핵심은 통합 툴체인(Unified Toolchain) 으로, 기본 번들러가 Rolldown으로 전환되고 esbuild가 담당하던 변환·최소화가 Oxc로 대체되었습니다. Vite 2 이후 가장 큰 아키텍처 변화로 평가됩니다. 주간 다운로드 수는 6,500만 건에 달합니다.

📋 목차

1. 주요 변경사항
2. Vite 7.0과 비교
3. 마이그레이션 가이드
4. 새로운 기능
5. 생태계 업데이트

주요 변경사항

1. 통합 툴체인 (Unified Toolchain)

Vite 8의 가장 큰 변화는 하나로 정렬된 툴체인입니다. 기존에는 개발 시 esbuild, 프로덕션 빌드 시 Rollup을 사용하는 이중 번들러 구조였으나, Vite 8은 이를 통합했습니다.

세 가지 구성 요소:

• Vite — 빌드 툴
• Rolldown — 번들러 (Rust 기반)
• Oxc — 컴파일러 (파싱·변환·최소화)

이 정렬로 파싱, 해석(resolve), 변환(transform), 최소화(minify) 전 과정에서 일관된 동작을 보장합니다.

2. Rolldown 기본 번들러 채택

Vite 7에서 실험적으로 제공되던 Rust 기반 번들러 Rolldown이 이제 기본값이 되어 esbuild와 Rollup을 대체합니다.

주요 효과:

• 최대 10~30배 빠른 빌드 (플러그인 호환성 유지)
• 개발/프로덕션 간 번들러 불일치 제거
• Vite 2 이후 가장 큰 아키텍처 변화

실제 프로덕션 빌드 개선 사례:

3. Oxc 기반 변환·최소화

JavaScript 변환과 최소화가 esbuild에서 Oxc로 이전되었습니다.

• JS 변환: Oxc가 esbuild 대체 (esbuild 옵션 → oxc)
• JS 최소화: Oxc Minifier 사용
• CSS 최소화: Lightning CSS가 기본값
• 단, Oxc는 네이티브 데코레이터 lowering을 지원하지 않아 필요 시 Babel/SWC 플러그인을 사용해야 합니다.

4. Node.js 지원 요구사항

Vite 8은 Node.js 20.19+ 또는 22.12+ 를 요구합니다. (Vite 7과 동일하게 유지)

5. 브라우저 타겟 상향

기본 브라우저 타겟이 2026-01-01 기준 "Baseline Widely Available" 기능 집합에 맞춰 상향되었습니다.

Vite 7.0과 비교

주요 차이점

성능 개선

• 개발/프로덕션 툴체인 통합으로 일관성과 속도 동시 확보
• 대규모 프로젝트에서 특히 큰 빌드 시간 단축 (실측 38~64% 수준)

마이그레이션 가이드

1단계: Node.js 버전 확인

# Node.js 버전 확인 (20.19+ 또는 22.12+ 필요)
node --version

2단계: package.json 업데이트

{
  "devDependencies": {
    "vite": "^8.0.0"
  }
}

기술 프리뷰 rolldown-vite 패키지를 사용 중이었다면, 위와 같이 vite: ^8.0.0으로 교체하면 됩니다.

3단계: 브라우저 타겟 확인

커스텀 타겟을 설정한 경우 상향된 최소 버전을 검토합니다:

// vite.config.js
export default {
  build: {
    target: 'baseline-widely-available',
  },
};

4단계: 번들러 옵션 마이그레이션 (Rollup → Rolldown)

rollupOptions 계열은 rolldownOptions로 이전해야 합니다. (당분간 deprecated 경고로 동작)

// vite.config.js
export default {
  build: {
    // rollupOptions: { ... },   // deprecated
    rolldownOptions: {
      // ...
    },
  },
  // worker.rollupOptions → worker.rolldownOptions
};

주요 변경 사항:

• optimizeDeps.esbuildOptions → optimizeDeps.rolldownOptions
• build.rollupOptions → build.rolldownOptions
• worker.rollupOptions → worker.rolldownOptions
• build.commonjsOptions → no-op (동작 없음)
• output.manualChunks 객체 형태 제거 (함수 형태는 deprecated)
• build.rollupOptions.watch.chokidar → build.rolldownOptions.watch.watcher

5단계: 변환·최소화 옵션 확인

// vite.config.js
export default {
  // esbuild: { ... },  // deprecated → oxc 로 이전
  oxc: {
    // JSX, define 등은 자동 변환 지원
  },
  build: {
    // 기존 esbuild 최소화로 되돌리려면 (esbuild를 devDependency로 설치 필요)
    minify: 'esbuild',
  },
};

6단계: CommonJS 상호운용(interop) 확인

기본 import 처리 규칙이 변경되었습니다. 기존 동작이 필요하면 임시로 복원할 수 있습니다:

// vite.config.js
export default {
  legacy: {
    inconsistentCjsInterop: true, // 이전 동작 임시 복원
  },
};

새로운 기능

1. 통합 Devtools

새로운 devtools 설정 옵션으로 통합 개발자 도구를 사용할 수 있습니다.

// vite.config.js
export default {
  devtools: {
    // ...
  },
};

2. TypeScript paths 내장 지원

resolve.tsconfigPaths로 tsconfig의 paths 매핑을 별도 플러그인 없이 사용할 수 있습니다.

// vite.config.js
export default {
  resolve: {
    tsconfigPaths: true,
  },
};

3. 기타 추가 기능

• emitDecoratorMetadata 자동 지원 — 데코레이터 메타데이터 자동 처리
• WebAssembly SSR 지원 — .wasm?init import
• 브라우저 콘솔 포워딩 — 브라우저 콘솔 로그를 개발 서버 터미널로 전달

4. @vitejs/plugin-react v6

React Refresh 변환에 Oxc를 사용하도록 변경되었고, Babel 의존성이 제거되어 설치 용량이 줄었습니다.

생태계 업데이트

registry.vite.dev

Vite, Rolldown, Rollup 플러그인을 npm 데이터 기반으로 매일 집계하는 검색형 플러그인 디렉토리가 공개되었습니다.

설치 용량 참고

Vite 8은 Vite 7보다 약 15MB 정도 큽니다.

• lightningcss 표준 의존성 추가: 약 10MB
• Rolldown 바이너리: 약 5MB

향후 로드맵

• Full Bundle Mode (실험적) — 개발 서버 시작 속도 3배 향상 목표
• JavaScript 플러그인용 Raw AST 전달
• 네이티브 MagicString 변환
• Environment API 정식화(stabilization)

마무리

Vite 8.0은 개발과 프로덕션을 하나로 잇는 통합 툴체인으로의 전환이 핵심입니다. Rolldown과 Oxc 채택으로 최대 10~30배 빠른 빌드를 제공하지만, 번들러 옵션(rollupOptions → rolldownOptions)과 변환 옵션(esbuild → oxc) 등 일부 설정 변경이 필요합니다.

주요 체크리스트:

• ✅ Node.js 20.19+ 또는 22.12+ 확인
• ✅ 브라우저 타겟 상향 검토
• ✅ rollupOptions → rolldownOptions 이전
• ✅ esbuild → oxc 옵션 확인, 필요 시 minify: 'esbuild' 유지
• ✅ CommonJS interop 동작 확인 (legacy.inconsistentCjsInterop)
• ✅ 데코레이터 사용 시 Babel/SWC 플러그인 준비

자세한 마이그레이션 가이드는 공식 문서를 참조하세요.