代码 Vite 8 升级笔记：Rolldown 接管打包，esbuild 配置怎么迁到 oxc

2026-10-23 21:08:33

Vite 8 升级笔记：Rolldown 接管打包，esbuild 配置怎么迁到 oxc

相关链接：Vite 迁移指南、Announcing Vite 8、Vite CHANGELOG

Vite 8 的核心变化是把底层打包与转换链路换掉了：用 Rolldown + Oxc 取代 esbuild 和 Rollup。官方说法是 Rolldown 作为单一统一打包器，构建速度提升 10–30 倍，同时保持完整插件兼容；兼容层会把已有的 esbuild 与 rollupOptions 配置自动转换成 Rolldown / Oxc 的等价写法。

对现有 Vue 项目来说，绝大多数配置不用手改，但要清楚哪些被自动映射、哪些只是“部分支持”、哪些是真正的破坏性变更。

默认浏览器目标变了

build.target 的默认值，以及 'baseline-widely-available' 对应的浏览器版本，都上调了：

浏览器	Vite 7	Vite 8
Chrome	107	111
Edge	107	111
Firefox	104	114
Safari	16.0	16.4

这组版本对齐的是 2026-01-01 的 Baseline Widely Available 特性集，也就是大约两年半前发布的浏览器。产物语法可以更现代，但 Safari 16.0–16.3 这一段被排除在外了。

依赖优化器换成 Rolldown

optimizeDeps 的预构建不再走 esbuild。为了向后兼容，Vite 仍然接受 optimizeDeps.esbuildOptions，并在内部自动转成 optimizeDeps.rolldownOptions。该选项已标记弃用，后续版本会移除，建议主动迁移。

自动转换的映射关系：

esbuildOptions.minify → rolldownOptions.output.minify
esbuildOptions.treeShaking → rolldownOptions.treeshake
esbuildOptions.define → rolldownOptions.transform.define
esbuildOptions.loader → rolldownOptions.moduleTypes
esbuildOptions.preserveSymlinks → !rolldownOptions.resolve.symlinks
esbuildOptions.resolveExtensions → rolldownOptions.resolve.extensions
esbuildOptions.mainFields → rolldownOptions.resolve.mainFields
esbuildOptions.conditions → rolldownOptions.resolve.conditionNames
esbuildOptions.keepNames → rolldownOptions.output.keepNames
esbuildOptions.platform → rolldownOptions.platform
esbuildOptions.plugins → rolldownOptions.plugins（部分支持）

注意 preserveSymlinks 是取反映射，platform 是平级搬过去，plugins 只做到了部分支持——这条是升级时最容易出问题的地方。

迁移后的写法大致是这样：

// Vite 7 写法
export default defineConfig({
  optimizeDeps: {
    esbuildOptions: {
      define: { __DEV__: 'true' },
      loader: { '.svg': 'text' },
    },
  },
})

// Vite 8：自动转换的结果
export default defineConfig({
  optimizeDeps: {
    rolldownOptions: {
      transform: { define: { __DEV__: 'true' } },
      moduleTypes: { '.svg': 'text' },
    },
  },
})

JS 转换换成 Oxc

JavaScript 转换由 esbuild 改为 Oxc。顶层 esbuild 选项同样保留兼容，会自动转成 oxc，但已弃用，未来移除。也就是说下面这种配置在 Vite 8 里不会立刻报错，但属于待清理项：

export default defineConfig({
  esbuild: {
    // 会被自动转成 oxc 的等价配置
  },
})

破坏性变更与版本节奏

Vite 8.0.0（2026-03-12）的 BREAKING CHANGES：

移除 import.meta.hot.accept 的解析回退（#21382）
更新默认浏览器目标（#21193）
rolldown-vite 主线合并（#21189）

特性方面：v2 原生插件默认启用；检测到 vite-tsconfig-paths 插件时给出警告；浏览器 console 日志与错误转发到 dev server 终端；实验性的 bundled-dev 全量打包模式；集成 devtools；rolldown 升级到 1.0.0-rc.9。

后续修复版本：8.3.5（2026-10-21）修了构建时缺失 chunk import maps、bundled-dev 下 server.origin 应用到资源 URL、bundled-dev 在已不再被引用的模块处停止 HMR 传播、CSS 中 url() 出现字面 % 时报错、optimizer 扫描 oxc.jsxInject import 等问题。

排查步骤

先跑 build 对比产物。 升级前后各打一次包，比较 dist 的 chunk 划分、入口文件体积、是否出现新的外部化或重复依赖。Rolldown 的 treeshake 与 Rollup 不完全一致，映射表里 treeShaking → treeshake 之外的默认行为差异，只能靠产物对比发现。
盯 esbuild 相关警告。 弃用提示会直接指出哪段配置还在用 esbuild 或 optimizeDeps.esbuildOptions。逐条改写成 oxc / rolldownOptions，不要依赖自动转换长期运行。
plugins 要逐个验证。 esbuildOptions.plugins → rolldownOptions.plugins 只是部分支持，自定义 esbuild 插件不一定等价可用。把插件列表拆开，一个一个注释掉跑预构建，确认哪个插件导致依赖优化失败或产物异常，再决定改写成 Rolldown 插件还是换方案。
评估 Safari 16.0–16.3 的白屏取舍。 默认目标提到 Safari 16.4 后，产物可能包含 16.0–16.3 无法解析的语法，表现是整包白屏而不是局部报错。如果不能放弃这批用户，就在 build.target 里显式写回更保守的目标：

export default defineConfig({
  build: {
    target: ['chrome111', 'edge111', 'firefox114', 'safari16.0'],
  },
})

代价是放弃一部分语法优化；如果确认流量里已经没有这段版本，保持默认即可。

检查 HMR 代码。 import.meta.hot.accept 的解析回退被移除，之前依赖“解析不到也算接受”的写法需要显式补上 accept 调用或 accept() 空调用，否则热更新行为会变。