Vite 8 마이그레이션으로 빌드 시간 3분의 1로 줄이기

프로젝트가 커지면서 빌드 시간이 조금씩 늘어나는 게 계속 신경 쓰였습니다.
8.5초 정도면 참을 만한 수준이긴 하지만, CI에서 여러 번 돌고 배포 파이프라인에 끼어 있다 보면 이 몇 초가 누적되어 꽤 큰 비용이 됩니다.
마침 Vite 8이 Rolldown을 기본 번들러로 채택하며 출시됐고, 빌드 시간 단축을 목표로 Vite 6에서 8로 마이그레이션을 진행했습니다.

결과부터 말하면 빌드 시간이 8.5초에서 2.7초로, 3배 이상 단축됐습니다.

다만 메이저 버전을 두 단계 건너뛰는 마이그레이션이다 보니 중간에 여러 문제를 겪었고, 그 과정을 기록으로 남깁니다.

목차

• 왜 마이그레이션을 했는가
• Vite 8과 Rolldown
• 마이그레이션 과정
• 겪은 문제들
• 결과
• 배운 점
• 마무리

왜 마이그레이션을 했는가

이유는 단순합니다. 빌드 시간 단축입니다.

Vite 8의 핵심 변화는 번들러 교체입니다. 기존 Vite는 개발 서버에서는 esbuild로 사전 번들링을 하고, 프로덕션 빌드에서는 Rollup을 사용하는 이중 구조였습니다. Vite 8은 이 두 가지를 Rust 기반의 Rolldown 하나로 통합했고, 공식적으로 최대 10~30배 빠른 빌드 성능을 이야기합니다.

실제로 공개된 기업 사례들의 수치도 인상적이었습니다.

• Linear: 46초 → 6초
• Ramp: 57% 단축
• Mercedes-Benz.io: 최대 38% 단축
• Beehiiv: 64% 단축

커뮤니티에서도 4분에서 30초로, 12분에서 2분으로 줄었다는 보고가 이어졌습니다. 이 정도 수치라면 마이그레이션 비용을 감수할 가치가 충분하다고 판단했습니다.

Vite 8과 Rolldown

Rolldown은 Vite 팀이 직접 만든 Rust 기반 번들러입니다. Rollup의 플러그인 API와 호환되도록 설계됐기 때문에 기존 Rollup 생태계의 플러그인을 대부분 그대로 사용할 수 있습니다.

번들러 통합 외에 눈에 띄는 변화들은 다음과 같습니다.

• 코드 변환(transform)이 esbuild에서 Oxc 기반으로 교체
• @vitejs/plugin-react v6부터 Babel 없이 Oxc 기반 React Refresh 동작
• CSS 압축에 lightningcss 사용
• TypeScript 경로(paths) 자동 해석 및 alias 지원
• Vite Devtools로 프로젝트 상태 시각화

패키지 용량은 Vite 7 대비 약 15MB 늘었습니다. lightningcss가 약 10MB, Rolldown 바이너리가 약 5MB를 차지하는데, 빌드 성능을 생각하면 충분히 납득할 만한 트레이드오프입니다.

마이그레이션 과정

공식 문서에서는 대부분의 프로젝트가 설정 변경 없이 업그레이드 가능하다고 안내합니다. 기존 esbuild 설정과 rollupOptions 설정도 자동으로 변환해 줍니다. 다만 저는 6에서 8로 두 단계를 건너뛰는 상황이었기 때문에, 중간에 낀 Vite 7의 breaking change까지 함께 감당해야 했습니다.

먼저 의존성을 업데이트했습니다.

pnpm add -D vite@^8 @vitejs/plugin-react@^6

그리고 마이그레이션 전후로 빌드 시간을 비교하기 위해 기준 수치를 먼저 측정해 뒀습니다.

# 마이그레이션 전 (Vite 6)
time pnpm build  # 약 8.5초

# 마이그레이션 후 (Vite 8)
time pnpm build  # 약 2.7초

설정 파일 자체는 크게 손댈 것이 없었습니다. 문제는 설정보다 그 주변에서 터졌습니다.

겪은 문제들

Node.js 버전 요구사항

Vite 7부터 Node 18 지원이 중단됐습니다. Vite 8은 Node 20.19+ 또는 22.12+가 필요합니다.

저는 Node 24 버전이었기 때문에 큰 문제는 없었습니다.

플러그인 호환성

다행히 사용하는 모든 플러그인이 호환이 되었기에 큰 문제는 없었습니다.

하지만, 레거시한 플러그인들은 문제가 될 수 있다고 하니 참고바랍니다.

esbuild 옵션 정리

기존 설정에 esbuild 관련 옵션이 남아 있었습니다. Vite 8이 상당 부분 자동 변환해 주지만, 자동 변환에 의존하기보다 명시적으로 정리하는 쪽을 택했습니다. 예를 들어 의존성 사전 번들링 옵션은 다음과 같이 바뀝니다.

// 기존 (Vite 6)
export default defineConfig({
  optimizeDeps: {
    esbuildOptions: {
      target: 'es2020',
    },
  },
})

// 변경 (Vite 8)
export default defineConfig({
  optimizeDeps: {
    rollupOptions: {
      // Rolldown 기반 옵션으로 정리
    },
  },
})

청크 분리 전략 변경

Rollup의 manualChunks로 벤더 청크를 나누고 있었다면 Rolldown에서는 advancedChunks라는 새로운 API가 권장됩니다. 기존 설정도 동작은 하지만 경고가 출력되어 새 API로 옮겼습니다.

// 기존 manualChunks 방식에서
build: {
  rollupOptions: {
    output: {
      advancedChunks: {
        groups: [{ name: 'vendor', test: /node_modules/ }],
      },
    },
  },
}

빌드 산출물 검증

번들러가 통째로 바뀌었기 때문에 빌드가 성공했다고 끝이 아니었습니다. 청크 분리 결과와 번들 크기가 이전과 달라질 수 있어서, 빌드 산출물을 배포 전에 실제로 띄워 보고 주요 페이지가 정상 동작하는지 확인하는 과정을 거쳤습니다. 결과적으로 큰 차이는 없었지만, 번들러 교체 수준의 마이그레이션에서는 이 검증을 생략하면 안 된다고 생각합니다.

결과

최종 빌드 시간 비교입니다.

구분	빌드 시간
Vite 6 (esbuild + Rollup)	약 8.5초
Vite 8 (Rolldown)	약 2.7초

약 3.1배 단축됐습니다. 로컬에서 체감되는 것은 물론이고, CI에서 빌드가 포함된 파이프라인 전체 시간도 눈에 띄게 줄었습니다.

개발 서버의 콜드 스타트와 HMR 반응 속도도 함께 개선됐습니다.

배운 점

첫째, 메이저 버전을 건너뛰는 마이그레이션은 중간 버전의 breaking change까지 한 번에 감당해야 합니다. Vite 6에서 8로 가는 비용의 상당 부분은 사실 Vite 7의 변경 사항(Node 버전, 기본 브라우저 타깃 등)이었습니다. 마이그레이션 가이드는 건너뛰는 버전까지 전부 읽어야 합니다.

둘째, "설정 변경 없이 업그레이드 가능"이라는 안내는 설정 파일에 한정된 이야기입니다. 실제 비용은 CI 환경, 플러그인 생태계, 빌드 산출물 검증처럼 설정 바깥에서 발생했습니다.

셋째, 번들러 교체 수준의 변화는 수치 측정을 전후로 남겨야 합니다. 마이그레이션 전에 기준 빌드 시간을 재두지 않았다면 "빨라진 것 같다"는 감상으로 끝났을 것입니다.

마무리

Vite 8은 esbuild와 Rollup의 이중 구조를 Rolldown 하나로 통합하면서 빌드 성능을 크게 끌어올렸고, 실제 프로젝트에서도 8.5초에서 2.7초로 3배 이상의 단축 효과를 확인했습니다. 마이그레이션 과정에서 Node 버전, 플러그인 호환성, 청크 분리 API 변경 등의 문제를 겪었지만, 얻은 성능 개선을 생각하면 충분히 남는 투자였습니다. Vite 6이나 7을 사용 중이라면 마이그레이션 가이드를 순서대로 확인하면서 올려볼 것을 권합니다.

참고 자료

• Vite 8.0 출시 - GeekNews
• Vite 공식 마이그레이션 가이드
• Rolldown 공식 문서