Vite의 두 가지 모드
Vite가 나오기 이전의 번들러들은 Vite와 같이 모드를 명시적으로 분리하여 각 모드별로 동작 방식의 차이를 두지 않았습니다. 대부분의 번들러는 개발 모드와 배포 모드 상관없이 모든 파일을 번들링하였기에, 코드를 수정하면 전체 번들링을 다시 해야 했습니다. 결과적으로 프로젝트 규모가 커짐에 따라 수정 사항을 화면에서 확인하기까지 기다려야 하는 시간 또한 증가했습니다.
이에 Vite는 이러한 병목 현상을 개선하고자 기존의 번들러들과 달리 Development Mode(개발 모드)와 Production Mode(빌드 모드)에 따라 빌드 방식을 분리하였습니다.
Development Mode
Vite의 Development Mode에서는 esbuild를 활용하여 디펜던시를 비롯한 모든 것을 ESM으로 변환합니다.
Vite는 사전 번들링 과정의 일환으로 ESM 종속성을 여러 내부 모듈과 병합하여 단일 모듈로 성능을 최적화합니다. 예를 들어, lodash-es에는 600개 이상의 내부 모듈이 포함되어 있습니다. 브라우저가 네이티브 ESM을 사용할 때, 사전 번들링을 거치지 않고 debounce와 같은 기능을 가져오게 되면 600개 이상의 HTTP 요청을 트리거하게 됩니다. Vite는 이를 단일 모듈로 사전 번들링하여 HTTP 요청을 하나로 줄입니다. 이러한 네트워크 요청의 획기적인 감소는 개발 서버에서 페이지 로드 속도를 비약적으로 향상시킵니다.
Production Mode
Vite의 Production Mode에서는 Development Mode와 달리 Rollup을 채택하여 번들링합니다.
Vite의 현재 플러그인 API는 esbuild를 프로덕션 번들러로 사용하는 것과 호환되지 않습니다. esbuild가 속도 면에서는 훨씬 빠르지만, Vite는 esbuild보다 유연한 플러그인 API를 제공하는 Rollup을 채택하여 단순한 속도보다는 프로덕션에서의 유연성과 안정성을 우선시하였습니다.
하지만, 최근 Vite 팀은 Rollup의 Rust 포팅인 Rolldown을 만드는 작업을 진행해 왔으며, Vite 8부터는 이 Rolldown을 통해 Rollup과 esbuild를 모두 대체할 예정입니다. 이를 통해 빌드 성능을 극대화하고 개발과 빌드 환경 사이의 설정 불일치를 제거하도록 준비하고 있습니다.
esbuild와 Rollup (Vite 7까지의 아키텍처)
Vite 7까지는 esbuild와 Rollup이 함께 사용되었습니다. 크게 두 분류로 보면 esbuild는 개발 모드에서, Rollup은 빌드 모드에서 사용된 것으로 볼 수 있습니다. 하지만 esbuild가 단순히 개발 모드에서만 제한적으로 사용된 것은 아닙니다. 두 도구의 역할을 좀 더 자세히 알아보겠습니다.
esbuild
esbuild는 위에서 설명하였듯이 개발 모드에서 의존성 사전 번들링에 사용됩니다. 하지만 사전 번들링 외에도, esbuild는 개발과 빌드 모드 모두에서 TypeScript나 React의 JSX 구문 등을 빠르게 변환하는 트랜스파일링을 담당합니다. 또한 빌드 모드에서는 자바스크립트의 최소화 작업을 esbuild가 처리합니다.
Vite 7의 Build Options 을 참고하면, 기본 옵션이 ‘esbuild’로 사용되고 있습니다.
Rollup
Rollup은 프로덕션 환경에서 모든 모듈을 최적화된 파일로 묶어주는 번들러 역할을 합니다. Rollup은 전체 프로젝트의 코드 스플리팅과 청크와 같은 최적화를 담당합니다.
프로젝트의 규모가 커지고 다양한 라이브러리와 복잡한 컴포넌트 구조가 도입될수록, Rollup이 제공하는 정교한 번들링 제어와 플러그인 생태계는 매력적이었습니다. 하지만 개발 모드와 빌드 모드에서 사용하는 도구가 esbuild와 rollup으로 다르다 보니 CJS/ESM 처리 방식이 다른 어려움이 있었고 프로덕션 빌드시에서만 발견되는 버그가 있는 등 유지보수가 난해했습니다.
Oxc와 Rolldown (Vite 8의 통합 아키텍처)
이렇게 번들러가 나뉘어져있는 한계를 극복하고 성능 향상을 이루기 위해, Vite 8은 Rust 기반의 새로운 통합 툴체인을 전면 도입했습니다.
Oxc
Oxc(@oxc-project/runtime)는 기존 esbuild가 담당하던 JavaScript/TypeScript 변환 및 코드 최소화를 완벽하게 대체하는 Rust 기반의 고성능 컴파일러입니다. Vite 8에서 Oxc는 구체적으로 다음과 같은 변환 동작을 수행합니다.
- 트랜스파일링: TypeScript의 타입들을 제거하고, React 등의 프레임워크를 위한 JSX/TSX 구문을 순수 JavaScript로 변환합니다.
- 구문 변환: 내부적으로
transformWithOxc()함수를 거쳐 최신 JS/TS 문법을 타겟 브라우저 환경에 맞는 코드로 다운그레이드합니다. - 코드 최소화: 프로덕션 빌드 시
build.minify: 'oxc'설정을 통해 코드를 최적화하고 용량을 압축합니다. - 데코레이터 지원: TypeScript의 실험적 데코레이터 기능을 지원합니다.
Rolldown
Rolldown은 Vite 8의 핵심으로, 기존의 esbuild와 Rollup을 모두 대체하는 통합 번들러입니다.
Rust로 작성되어 자바스크립트로 작성된 기존의 Rollup 대비 10~30배 이상 빠른 빌드 속도이고, Rollup의 플러그인 API와 호환되도록 설계되어 기존 생태계를 그대로 사용할 수 있습니다.
- 의존성 사전 번들링: 개발 서버 실행 시 기존 esbuild가 하던
node_modules최적화를 Rolldown이 담당하여.vite/deps폴더에 사전 번들링합니다. 이를 통해 CommonJS 모듈을 ESM으로 변환하고 HTTP 요청 수를 줄입니다. - 프로덕션 번들링: 기존 Rollup의 역할이었던 코드 스플리팅과 트리쉐이킹을 수행하여 최적화된 결과물을 생성합니다.
- 웹 워커 처리: 메인 스레드와 분리된 웹 워커를 위한 별도의 번들도 생성하고 관리합니다.
결론
Vite 8의 가장 큰 변화는 Rolldown을 통해 개발 환경과 프로덕션 환경이 드디어 하나의 번들러로 통합되었다는 점입니다. 이로 인해 두 환경 간의 미묘한 동작 불일치가 완전히 사라졌으며, 개발자에게 빠르면서도 일관된 개발 경험을 제공하게 되었습니다.
또한, 아키텍처의 통합은 빌드 파이프라인의 비효율성을 개선했습니다. 기존 환경에서 다양한 플러그인을 조합할 경우 Go 프로세스(esbuild) → JavaScript 메인 스레드(Rollup) → Rust(SWC) → JavaScript로 이어지는 복잡한 파이프라인을 거쳐야 하는 최악의 경우가 발생하기도 했습니다. Vite 8은 이러한 파편화된 도구들을 단일 Rust 기반 환경(Rolldown + Oxc)으로 통합함으로써, 각 프로세스 및 스레드 간 코드를 주고받을 때 발생하는 데이터 전송(AST 직렬화 및 역직렬화) 오버헤드를 줄이고 성능을 높였습니다.
더 나아가, VoidZero(v0) 팀은 단순히 Vite의 개선을 넘어 자바스크립트 툴체인 통합을 목표로 하고 있습니다. 프론트엔드 개발 환경의 패러다임이 크게 변화하고 있는 만큼, 앞으로 Vite와 VoidZero 생태계에 지속적인 관심을 가질 필요가 있겠습니다.
참고
https://vite.dev/guide/
https://rolldown.rs/guide/introduction#why-rolldown
https://deepwiki.com/vitejs/vite
https://kinsta.com/blog/vite-vs-webpack/
https://voidzero.dev/posts/announcing-voidzero-inc
https://www.youtube.com/watch?v=EKvvptbTx6k
