Vite 8 + Rolldown: Rust 기반 빌드가 10~30배 빠른

Source: Dev.to

왜 Vite는 새로운 번들러가 필요했는가

수년간 Vite는 esbuild(개발용, 속도)와 Rollup(프로덕션용, 고급 청킹 및 플러그인 생태계) 두 개의 별도 번들러를 사용했습니다. 이 분리 구조는 일관성 문제를 일으켰습니다—개발에서 동작하던 플러그인이 프로덕션에서는 실패할 수 있었고, 모듈 해석 차이 때문에 미묘한 버그가 발생했습니다. 이를 연결하는 코드가 점점 복잡해졌습니다.

Rolldown은 개발과 프로덕션 모두를 위한 단일 번들러가 됨으로써 이 문제를 해결합니다. Rust로 작성되었으며 Rollup 플러그인 API를 지원하고, Vite와 같은 팀(VoidZero)에서 유지보수합니다. 새로운 툴체인은 다음으로 구성됩니다:

• Vite – 오케스트레이션
• Rolldown – 번들링
• Oxc – 파싱, 변환, 린팅

모두 한 팀이 만든 것으로, 통합된 경험을 제공합니다.

실제 수치는 어떻게 보이는가

rolldown-vite(기술 프리뷰)를 초기 도입한 사례들의 벤치마크는 상당한 향상을 보여줍니다:

• Linear – 프로덕션 빌드 시간이 46 초에서 6 초로 감소
• Beehiiv – 빌드 시간 64 % 감소
• Ramp – 빌드 시간 57 % 감소

Rolldown은 프로덕션 번들링에서 Rollup보다 10–30배 빠른 것으로 보고되었으며, 변환 속도는 esbuild과 동등합니다.

업그레이드 및 변경 사항

Rolldown이 Rollup 및 Vite와 동일한 플러그인 훅을 구현했기 때문에 마이그레이션은 간단합니다.

npm install vite@8

규모가 큰 프로젝트의 경우 두 단계 업그레이드가 권장됩니다:

# Step 1: rolldown-vite 프리뷰 사용해 보기
npm install rolldown-vite

# Step 2: 공식 Vite 8 릴리스로 업데이트
npm install vite@8

새로운 생활 편의 기능

1. 내장 tsconfig 경로 해석

   // vite.config.ts
   import { defineConfig } from 'vite';
   
   export default defineConfig({
     resolve: {
       tsconfigPaths: true, // tsconfig에서 경로를 자동으로 읽음
     },
   });

2. TypeScript의 emitDecoratorMetadata 자동 지원 – Angular 및 NestJS 프로젝트에 유용합니다.

메타 프레임워크에서 Vite 오버라이드하기

아직 업데이트되지 않은 프레임워크(예: Nuxt, Astro, Vitest)를 사용한다면 오버라이드를 추가합니다:

// package.json (npm)
{
  "overrides": {
    "vite": "^8.0.0"
  }
}

앞으로의 로드맵

Rolldown 통합을 통해 기존 분리 번들러 모델로는 불가능했던 기능들을 구현할 수 있습니다:

• Full Bundle Mode(실험적): 대규모 프로젝트에서 개발 서버 시작이 3배 빨라지고, 10배 적은 네트워크 요청을 발생시켜 전체 개발 파이프라인을 Rolldown이 담당하도록 합니다.
• Raw AST 전송: JavaScript 플러그인이 Rust에서 생성된 AST에 거의 오버헤드 없이 접근할 수 있어, 네이티브 플러그인과 JS 플러그인 간 성능 격차를 좁힙니다.

아직 Vite 8을 사용해 보지 않았다면, 지금 업그레이드하여 직접 프로젝트에서 빌드 시간 개선 효과를 측정해 보세요. 대부분의 팀은 몇 분 안에 마이그레이션을 마치고 즉각적인 이득을 경험할 수 있습니다—프론트엔드 빌드에 45초를 기다릴 필요가 없습니다.