Vite 8 — 뭐가 달라졌을까?

3월 12일에 Vite 8이 나왔습니다.

내부 번들러가 통째로 바뀌었다는 게 이번 릴리스의 핵심인데, 사실 대부분은 "그래서 내 프로젝트에 뭐가 달라지는데?"가 더 궁금하잖아요.

저도 그래서 공식 블로그 포스트를 읽으면서 실제로 와닿는 것들만 추려봤습니다.

빌드가 진짜 빨라졌다

Vite는 그동안 내부적으로 번들러를 두 개 쓰고 있었습니다. 개발 서버에서는 esbuild, 프로덕션 빌드에서는 Rollup. Vite 8부터는 이걸 Rust 기반 Rolldown 하나로 합쳤습니다.

얼마나 빨라졌냐 — 베타 기간에 실제 기업들이 공유한 수치를 보면:

Linear가 46초에서 6초로 줄었다는 건 좀 놀랍네요. npm run build 치고 슬랙 보다 오면 끝나있는 수준이었을 텐데, 이제 터미널 쳐다보는 사이에 끝나는 거니까요. 당연히 프로젝트 규모가 클수록 차이가 더 크겠죠.

"dev에서 되는데 build하면 안 돼요" — 이거 줄어든다

번들러 통합의 숨은 장점입니다.

기존에는 개발 서버(esbuild)와 프로덕션 빌드(Rollup)가 모듈을 처리하는 방식이 미묘하게 달랐습니다. 개발 환경에서 잘 돌아가는 코드가 빌드하면 깨지는 거, 한번쯤은 겪어보셨을 거예요. 특히 특정 라이브러리 import 처리나 CSS 모듈 쪽에서 이런 일이 잦았는데,

Vite 8에서는 dev든 build든 같은 번들러(Rolldown)를 타기 때문에 이런 불일치가 구조적으로 줄어듭니다.

tsconfig paths, 드디어 플러그인 없이 된다

// vite.config.ts
export default defineConfig({
  resolve: {
    tsconfigPaths: true,
  },
});

@/components/Button 같은 경로 별칭 쓰려고 vite-tsconfig-paths 깔아본 적 있으시죠? 이제 설정 한 줄이면 됩니다.

기본값은 false인데(약간의 성능 비용이 있어서), 웬만하면 켜두는 게 편합니다.

브라우저 console.log가 터미널에 찍힌다

// vite.config.ts
export default defineConfig({
  server: {
    forwardConsole: true,
  },
});

브라우저에서 찍은 console.log나 런타임 에러가 터미널에도 같이 나옵니다.

특히 Claude Code 같은 AI 코딩 도구랑 작업할 때 유용한데, 에이전트가 브라우저 DevTools를 직접 못 보는 문제가 있었거든요. 이제 터미널로 에러가 올라오니까 에이전트가 바로 알아챌 수 있습니다. 코딩 에이전트가 감지되면 이 옵션이 자동으로 켜지기도 하고요.

AI 도구 안 써도 그냥 터미널 하나로 서버 로그랑 브라우저 로그 같이 보고 싶을 때 좋습니다.

React 쓴다면 — plugin-react v6

@vitejs/plugin-react도 v6이 나왔는데, Babel 의존성이 완전히 빠졌습니다. React Refresh 변환을 Oxc(Rust 기반 컴파일러)가 대신 처리합니다. 설치 크기 줄고, 변환도 빨라지고.

React Compiler 쓰는 프로젝트는 reactCompilerPreset 헬퍼를 @rolldown/plugin-babel이랑 같이 쓰면 됩니다. v5도 Vite 8이랑 호환되니까, Vite 먼저 올리고 플러그인은 천천히 바꿔도 괜찮습니다.

업그레이드, 생각보다 어렵지 않다

기존 esbuild랑 rollupOptions 설정을 Rolldown 쪽으로 자동 변환해주는 호환 레이어가 들어있어서, 설정 안 건드리고 그냥 올려도 되는 프로젝트가 많습니다.

규모가 좀 있는 프로젝트라면 두 단계로 나누는 게 안전합니다.

1. Vite 7에서 vite → rolldown-vite로 패키지만 바꿔서 먼저 테스트
2. 괜찮으면 Vite 8로 올리기

이러면 문제 생겼을 때 번들러 때문인지, Vite 8의 다른 변경 때문인지 구분이 됩니다.

Node.js는 20.19+ 또는 22.12+ 필요한데, Vite 7이랑 같은 조건이라 대부분 이미 맞춰놨을 겁니다.

설치 크기는 좀 늘었다

Vite 7 대비 약 15MB 정도 커졌습니다. lightningcss가 기본 의존성으로 들어온 게 ~10MB, Rolldown 바이너리가 esbuild + Rollup보다 큰 게 ~5MB. 빌드 속도 올리려고 바이너리 크기를 좀 희생한 건데, 솔직히 15MB면 크게 신경 쓸 정도는 아닌 것 같습니다.

앞으로 눈여겨볼 것

개인적으로 Full Bundle Mode가 기대됩니다. 개발 환경에서도 프로덕션처럼 번들링하는 모드인데, 초기 측정에서 dev 서버 시작이 3배 빨라지고 네트워크 요청이 10분의 1로 줄었다고 합니다.

Vite의 언번들 개발 방식이 프로젝트 커지면 모듈 요청이 수천 개씩 쌓여서 느려지는 문제가 있었는데, 이게 안정화되면 꽤 큰 변화가 될 것 같습니다.

한눈에 보기

Vite 쓰고 있다면 마이그레이션 가이드 한번 훑어보고, 사이드 프로젝트에서 먼저 돌려보세요.

참고 링크

• Vite 8 공식 발표
• 마이그레이션 가이드
• Rolldown
• Vite Plugin Registry