Vite 8 升级实测：Rolldown 构建到底快了多少？迁移踩坑全记录

周末刷掘金发现 Vite 8 正式发布了，最大的卖点就是用 Rust 写的 Rolldown 替掉了 esbuild + Rollup 的双引擎架构。官方说"10-30x faster builds"，说实话我第一反应是------又画饼？

不过本着"Talk is cheap, show me the benchmark"的精神，我拿手头一个中型 React 项目实际跑了一圈。结果......确实快，但过程没那么丝滑。

先说结论

指标	Vite 7.2	Vite 8.0	变化
冷启动 dev server	1.8s	0.6s	⬇️ 67%
生产构建	12.4s	2.1s	⬇️ 83%
HMR 热更新	~80ms	~35ms	⬇️ 56%
node_modules 体积	248MB	221MB	⬇️ 11%
构建产物大小	1.42MB	1.38MB	基本持平

项目规模：约 180 个组件，用了 Ant Design + TanStack Query + Zustand，算是比较典型的中后台项目。

我的项目情况

这个项目是去年底从 Webpack 迁过来的（对，我迁了两次），大概这样：

React 19 + TypeScript 5.7
Ant Design 5.x（组件多，构建压力大）
路由用的 React Router 7
状态管理 Zustand
大概 200+ 个 tsx 文件

之前在 Vite 7 上跑得还行，但每次 build 要 12 秒确实有点烦，特别是 CI 上跑 3 个环境，算下来就是将近一分钟。

升级过程

直接升级（翻车了）

一开始我很莽，直接改 package.json：

bash 复制代码

pnpm add vite@^8.0.0 -D

然后 pnpm dev，结果：

vbnet 复制代码

[vite] Internal server error: Failed to resolve import "@ant-design/icons"
from "src/components/Header.tsx"

Ant Design 的图标包 resolve 出了问题。查了一下，是因为 Rolldown 对 exports 字段的解析和 esbuild 有细微差异。

渐进式迁移（推荐）

官方其实提供了一个中间方案------先用 rolldown-vite 包在 Vite 7 上过渡：

json 复制代码

{
  "devDependencies": {
    "vite": "npm:rolldown-vite@7.2.2"
  }
}

这样可以在 Vite 7 的配置下先测试 Rolldown 的兼容性，排除问题后再升到 Vite 8。

我用这个方案跑了一下，果然复现了 Ant Design Icons 的问题，说明不是 Vite 8 的锅，是 Rolldown 的。

解决 Ant Design Icons 问题

翻了一圈 GitHub Issues，发现是 @ant-design/icons 这个包的 package.json 里 exports 写法比较老，Rolldown 严格模式下解析不了。

解决办法很简单，在 vite.config.ts 里加一行：

typescript 复制代码

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  resolve: {
    // 让 Rolldown 回退到 main/module 字段解析
    mainFields: ['module', 'main'],
    // 顺便开启 TS 路径别名（Vite 8 新功能）
    tsconfigPaths: true,
  },
})

加了 mainFields 之后，dev 和 build 都跑通了。

完整的 vite.config.ts

升级后我的配置长这样：

typescript 复制代码

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  resolve: {
    mainFields: ['module', 'main'],
    tsconfigPaths: true,  // 不用再装 vite-tsconfig-paths 插件了
  },
  // Vite 8 新功能：内置 devtools
  devtools: true,
  server: {
    // 把浏览器 console 转发到终端，配合 AI 编程工具特别好用
    forwardConsole: true,
  },
})

两个新配置值得说：

resolve.tsconfigPaths: true ：原来需要装 vite-tsconfig-paths 插件才能用 tsconfig 里的 paths，现在内置了。少一个依赖，爽。
server.forwardConsole: true ：浏览器的 console.log / console.error 会直接打到你终端里。写代码时不用再来回切浏览器 DevTools 了。

跑分环节

好了，配置搞定，来跑分。测试环境：

MacBook Pro M3 Pro, 18GB RAM
Node.js 22.12.0
pnpm 9.15.4

冷启动

bash 复制代码

# 清缓存后测
rm -rf node_modules/.vite

# Vite 7
time pnpm dev
# ready in 1847ms

# Vite 8
time pnpm dev
# ready in 623ms

快了 3 倍。第一次启动就能感受到，按下回车基本秒开。

生产构建

bash 复制代码

# Vite 7
time pnpm build
# ✓ built in 12.41s

# Vite 8
time pnpm build
# ✓ built in 2.13s

快了接近 6 倍，这个提升是最炸裂的。12 秒到 2 秒，CI 上三个环境从 37 秒变成 6 秒。

HMR

这个不太好精确测，我改了同一个组件的文字，用 Performance 面板看到的大概时间：

Vite 7：70-90ms
Vite 8：30-40ms

感知上差别不大，本来就够快了。

新功能体验

内置 Devtools

在配置里加了 devtools: true 后，浏览器会多一个浮窗入口（右下角小图标），点开能看到：

模块依赖图（可视化）
插件执行耗时
热更新历史

对于排查"为什么某个模块改了会触发全量刷新"特别有用。之前要装 vite-plugin-inspect，现在不用了。

Console 转发

forwardConsole: true 开了之后，浏览器里 console.log('hello') 会同时打到终端：

csharp 复制代码

[browser] hello
[browser:error] Uncaught TypeError: Cannot read properties of undefined

这个功能我觉得最大的受益者是用 Cursor/Claude Code 这类 AI 编程工具的人------AI 可以直接在终端看到浏览器报错，不用你手动复制了。

Wasm SSR

.wasm?init 现在在 SSR 里也能用了。如果你的项目用了 Wasm（比如 Prisma 的某些 adapter），这个更新对你很重要。我项目没用到，就不展开了。

踩坑记录

升级过程中遇到的坑，都记下来了：

1. PostCSS 插件报错

arduino 复制代码

[rolldown:css] Error: Cannot find module 'postcss-preset-env'

Rolldown 内置了 CSS 处理，和之前用 esbuild 处理 CSS 的方式不一样。如果你的 postcss.config.js 里用了一些老插件，可能需要更新。

我的解法：升级 postcss-preset-env 到最新版就好了。

2. 动态 import 路径变了

之前 Rollup 打包后动态 import 的 chunk 名是 assets/Home-[hash].js，Rolldown 默认变成了 assets/chunk-[hash].js。

如果你的部署脚本或 CDN 配置依赖文件名模式，注意改一下。可以在 build.rollupOptions.output.chunkFileNames 里自定义回去。

3. 某些 Rollup 插件不兼容

我用的 rollup-plugin-visualizer 直接报错了，因为它依赖 Rollup 的内部 API。换成 Vite 8 自带的 devtools 模块分析就行了。

4. TypeScript Decorator 的惊喜

如果你项目用了 MobX 或者 NestJS 那种重度装饰器的写法，Vite 8 内置了 emitDecoratorMetadata 支持，不用再装 @rollup/plugin-swc 了。

要不要现在升？

我的建议：

可以升的情况：

新项目，直接用 Vite 8
中小型项目，依赖不复杂的
对构建速度有刚需的（CI 时间长）

建议再等等的情况：

用了很多 Rollup 社区插件的老项目
Monorepo + 自定义构建流程特别复杂的
生产环境容不得一点问题的

Vite 8 的 Rolldown 兼容层还在快速迭代，每周都有小版本修复。如果不急，等 8.1 再上也行。

小结

Rolldown 确实是 Vite 这几年来最大的一次架构升级。从双引擎（dev 用 esbuild，build 用 Rollup）到单引擎（全用 Rolldown），不仅快了，开发体验也更统一了。

升级过程比我预期的顺利，主要踩的坑都是第三方依赖的兼容性问题，Vite 本身的 API 变化很小。如果你还在 Vite 6/7，真的可以考虑动一动了。

以上数据基于我个人项目实测，不同项目差异可能很大，仅供参考。欢迎在评论区分享你的升级体验