Vite 8이 나왔습니다 — 프론트엔드 빌드에 관한 모든 것을 바꿉니다
Source: Dev.to
수개월에 걸친 베타 테스트와 커뮤니티 피드백을 거쳐, Vite 8이 공식적으로 출시되었습니다 — 이는 Vite가 프론트엔드 개발 규칙을 재정의한 이후 가장 큰 릴리스입니다. 주요 변화는? Vite가 이제 Rolldown이라는, Vite와 같은 팀이 만든 초고속 Rust 기반 번들러로 구동된다는 점입니다. 이는 단순한 성능 향상이 아니라, 차세대 프론트엔드 툴링을 위한 아키텍처적 전환을 의미합니다.
Vite 8이 해결하는 문제
Vite 8 이전에 Vite는 내부에서 두 개의 별도 도구를 사용했습니다:
- esbuild – 번개처럼 빠른 개발 서버 변환을 위해
- Rollup – 프로덕션 번들을 위해
이러한 분리는 잘 작동했지만 마찰을 일으켰습니다: 두 개의 변환 파이프라인, 두 개의 플러그인 시스템, 그리고 개발과 프로덕션 빌드 간의 미묘한 동작 차이. “개발에서는 동작하지만 프로덕션에서는 깨진다”는 디버깅은 개발자가 겪어서는 안 될 통과 의식과 같습니다.
Vite 8은 이 분리를 완전히 없앱니다.
롤다운 소개: 모든 것을 지배하는 하나의 번들러
https://rolldown.rs 은 Rollup 플러그인 API와 완전 호환되는 Rust 기반 번들러입니다. Vite 8과 함께 사용하면 esbuild와 Rollup을 모두 대체하여 빌드 파이프라인을 단일하고 통합된 툴체인으로 만들 수 있습니다.
벤치마크 하이라이트
- 19 000개의 모듈을 대상으로 한 공식 벤치마크에서 롤다운은 1.61 초에 완료됐으며, Rollup의 40.10 초에 비해 25배 빠른 성능을 보였습니다.
- 실제 보고된 프로덕션 빌드 시간은 46 초에서 6 초로 선형적으로 감소했습니다.
- 커뮤니티 보고에 따르면 다양한 프로젝트 규모에서 10–30배 빠른 프로덕션 빌드가 가능하다고 합니다.
- 개발 서버 시작 속도가 약 3배 빨라졌으며, 전체 리로드는 약 40 % 더 빠릅니다.
팀은 현재 Full Bundle Mode 개발에 적극적으로 매진하고 있으며, 이를 통해 개발 중에 개별 모듈 대신 단일 사전 번들 파일을 제공함으로써 네트워크 요청을 10배 줄일 수 있을 것으로 기대됩니다.
Vite 8의 새로운 기능
통합 툴체인
Vite, Rolldown, 그리고 Oxc(러스트 기반 JS 컴파일러)가 이제 모두 같은 팀인 VoidZero에 의해 구축·관리됩니다. 이는 일관된 동작, tighter integration, 그리고 전체 스택을 책임지는 단일 팀을 의미합니다.
내장 tsconfig 경로 지원
대부분의 설정에서 vite-tsconfig-paths 플러그인을 더 이상 사용할 필요가 없습니다. 설정 파일에 아래와 같이 켜기만 하면 됩니다:
// vite.config.ts
export default {
resolve: {
tsconfigPaths: true,
},
}브라우저 콘솔 포워딩
브라우저에서 발생한 console.log와 오류를 터미널로 직접 전달합니다:
export default {
server: {
forwardConsole: true,
},
}SSR 및 백엔드 중심 애플리케이션을 디버깅할 때, 단일 통합 로그 스트림을 원한다면 유용합니다.
Wasm SSR 지원
.wasm?init 임포트가 이제 SSR 환경에서도 동작합니다 — 서버에서 WebAssembly를 활용하는 팀들이 오래 기다려온 기능입니다.
통합 Vite Devtools
옵션을 켜면 풍부한 브라우저 내 디버깅 및 분석 도구가 제공됩니다. 모듈 그래프, 플러그인 변환, 빌드 메타데이터 등을 깊이 있게 살펴볼 수 있습니다.
CSS 최소화에 Lightning CSS 사용
Vite 8은 기본 CSS 최소화 엔진을 esbuild에서 Lightning CSS로 전환했습니다. 표준 지원이 향상되고 출력 파일이 더 작아집니다. 필요하다면 다시 esbuild로 되돌릴 수 있습니다:
export default {
build: {
cssMinify: 'esbuild',
},
}React 플러그인, Oxc‑네이티브 전환
@vitejs/plugin-react v6이 Vite 8과 함께 제공됩니다. Babel이 더 이상 의존성이 아니며, React Refresh 변환이 Oxc를 통해 실행됩니다. 설치 속도와 HMR이 빨라집니다.
알아두면 좋은 Breaking Changes
- Node.js 20.19+ 혹은 22.12+ 가 이제 필수입니다.
esbuild.minify*옵션이build.rolldownOptions.output.minify로 이동했습니다.- 일부 manual chunk 설정 및 dependency‑optimization 동작이 변경되었습니다 — 자세한 내용은 migration guide를 참고하세요.
- 플러그인 제작자에게: Rolldown이 동일한 플러그인 API를 구현하므로 대부분의 Rollup‑compatible 플러그인이 바로 동작합니다. SvelteKit, React Router, Storybook 모두 테스트를 거쳐 별도 변경 없이 작동합니다.
지금 업그레이드해야 할까?
대부분의 프로젝트에 대해 예입니다. 마이그레이션 경로가 매끄럽습니다:
npm install vite@8 --save-dev간단한 프로젝트라면 이 명령만으로 충분합니다. 플러그인을 많이 사용하거나 manual chunk 분할을 하는 복잡한 설정이라면 migration guide를 검토하고, 배포 전에 프로덕션 빌드를 테스트하세요.
더 큰 그림
Vite 8은 단순한 버전 업데이트가 아니라, VoidZero가 Rust로 만든 완전 통합 JavaScript 툴체인을 구현하려는 첫 번째 이정표입니다. Vite는 개발 경험을, Rolldown은 번들을, Oxc는 변환을 담당합니다. 이제 모두 같은 언어로 소통합니다.
수년간 JavaScript 생태계는 도구가 파편화되는 문제에 시달렸습니다. Vite 8은 그 시대를 종식시키기 위한 진지한 발걸음입니다.
아직 업그레이드하지 않았다면, 지금이 가장 좋은 시기입니다. CI 파이프라인도 고마워할 것입니다.
Vite 8로 업그레이드했나요? 어떤 빌드 시간 개선을 체감하고 있나요?