Vite 8 为什么统一使用 Rolldown:开发构建与生产打包边界
升级 Vite 8 时,最容易误判的是“换了一个 bundler,所以所有配置都要重写”。实际变化更有边界:Vite 8 把原来由 esbuild 负责的依赖预构建和由 Rollup 负责的生产打包,收敛到 Rust bundler Rolldown;JavaScript 转换与压缩、CSS 压缩则分别落在 Oxc 和 Lightning CSS。先按职责核对,再决定哪些配置需要迁移,通常比直接删掉旧配置稳妥。
Vite 8 的核心不是让开发服务器和生产构建变成同一种运行模式,而是让两条打包与转换链使用更一致的底层能力;旧配置多数有兼容转换,但插件和切包策略仍要单独复查。
- Vite 8 以 Rolldown 统一依赖优化与生产打包,减少 esbuild、Rollup 两套链路之间的差异。
- Oxc 负责 JavaScript 转换与压缩,Lightning CSS 默认负责 CSS 压缩,不能把它们都当成 Rolldown 选项。
- 升级先看 Node.js 20.19+ 或 22.12+,再核对旧配置转换、插件兼容和 manualChunks 的切包边界。
Vite 8 解决了哪条双打包链边界
过去的 Vite 把开发体验和生产结果交给不同工具:esbuild 擅长依赖预构建以及 TypeScript、JSX 转换,Rollup 负责生产打包、分块和插件扩展。两条链各有优势,但同一个模块可能经历两套解析、转换和插件协作,修复一边的边界问题,另一边不一定同步。
Vite 8 的结构变化可以先记成一句话:Vite 8 以 Rolldown 为统一 bundler,减少开发与生产之间的胶水逻辑。这里的“统一”不等于开发服务器马上默认启用 Full Bundle Mode;它首先统一底层打包能力,开发模式仍有自己的加载与 HMR 体验。官方发布说明把 Full Bundle Mode 作为后续实验方向,不能当成 Vite 8 的默认行为。

图中的开发链、生产链和统一工具链是静态职责分组:esbuild 与 Rollup 代表历史分工,Rolldown、Oxc、Lightning CSS 代表 Vite 8 的协作边界,Vite 8 负责把这些能力组织到同一套工程入口。
Rolldown、Oxc 与 Lightning CSS 如何分工
升级排查时不要只搜“Rolldown”,而要把工作拆开。依赖优化现在使用 Rolldown;JavaScript 转换从 esbuild 转向 Oxc;JavaScript 压缩默认使用 Oxc Minifier;CSS 压缩默认使用 Lightning CSS。它们处在不同层,故障现象也不同:依赖入口异常先看优化配置,语法转换异常看 Oxc,样式兼容或压缩差异看 Lightning CSS。
| 原职责 | Vite 8 默认方向 | 复查重点 |
|---|---|---|
| esbuild 依赖优化 | Rolldown | optimizeDeps 旧字段是否触发兼容转换 |
| esbuild JavaScript 转换 | Oxc | JSX、define、自定义装饰器等边界 |
| Rollup 生产打包 | Rolldown | 插件钩子与切包配置 |
| esbuild CSS 压缩 | Lightning CSS | build.cssMinify 与 CSS 降级差异 |
这个分层也解释了为什么“构建更快”不能直接等同于“所有项目都无需验证”。官方给出的 10–30 倍是基准和项目案例层面的表述,真实收益取决于模块规模、插件和资源处理方式。生产项目应记录原构建耗时、产物体积和异常日志,再做前后对比。
升级时哪些配置仍能自动转换
Vite 8 提供兼容层,很多项目可以先不改配置就完成升级。第一项检查是 Node.js:官方要求为 20.19+ 或 22.12+,这是 ESM 分发和 require(esm) 行为的基础。版本不满足时,先升级运行环境,不要把报错误判为 Rolldown 插件问题。
第二项检查是依赖优化。旧的 optimizeDeps.esbuildOptions 仍可被自动转换到 optimizeDeps.rolldownOptions,但它已进入弃用路径。可以把迁移记录写成一张小表:minify 对应 output.minify,treeShaking 对应 treeshake,define 对应 transform.define;不确定的字段不要凭名字猜,回到迁移文档逐项核对。
export default defineConfig({
optimizeDeps: {
rolldownOptions: {
output: { minify: true }
}
}
})
第三项检查是 build.rollupOptions。它仍能帮助旧项目平滑过渡,但官方已经把 build.rolldownOptions 作为新的命名方向。迁移时建议一次只改一类设置:先升级并完成构建,再迁移依赖优化,最后处理输出和插件相关配置。这样每次失败都有明确的回退点。
插件与切包边界要怎么复查
大多数 Vite 插件继续依赖 Rollup/Vite 插件 API,因此不必看到 Rolldown 就全部替换。真正值得单独检查的是插件是否依赖未实现的钩子、旧的输出选项,或在 JavaScript 与 Rust 运行时之间传递了特殊对象。React 项目还要留意 @vitejs/plugin-react 的 Oxc 转换路径;需要 React Compiler 或 Babel 插件时,应按官方说明显式接入对应方案。
切包配置更不能只看“构建成功”。manualChunks 仍有兼容支持,但函数形式已标记弃用;Rolldown 提供更细的 advancedChunks。旧规则可以先保留并观察产物,再把明确的 vendor 分组迁移到新配置。检查点不是配置文件里出现了新名字,而是关键入口的 chunk 数量、首屏资源和动态导入关系符合预期。

最后保留一次可回退的验证:执行 npm run build,确认退出码为 0;查看是否出现未知输出选项警告;对比主入口和动态导入产物;如果只在某个插件启用后失败,就用最小配置复现。遇到原生插件问题时,experimental.enableNativePlugin 可以按官方迁移说明临时降级到 'resolver' 或 false,但这属于定位手段,不应永久掩盖配置问题。
常见问题
Vite 8 是否还需要安装 esbuild?
Vite 本身不再直接依赖 esbuild,但调用 transformWithEsbuild 的插件可能仍需要把 esbuild 声明为开发依赖。能迁移到 transformWithOxc 时,优先按插件文档调整。
升级后必须把 rollupOptions 改成 rolldownOptions 吗?
不必一次性全部改。兼容层会处理许多旧配置,但新项目和持续维护的配置应逐步迁移,并对切包、插件钩子和输出选项做回归检查。
为什么构建成功还要检查 chunk?
构建成功只说明配置和插件完成了这次打包,不代表切包结果符合业务目标。首屏资源、动态导入和缓存边界仍可能因旧的 manualChunks 规则变化。
官方核对入口:Vite 8 发布说明 与 Vite 8 迁移指南。版本或配置持续变化时,以这两处的一手说明为准。
系统服务 journal 日志放内存还是磁盘:用 Storage 和目录状态固定持久化结果
- 上一篇
- 系统服务 journal 日志放内存还是磁盘:用 Storage 和目录状态固定持久化结果
- 下一篇
- Go context.Cause 为什么拿不到真正取消原因:WithCancelCause 的传播边界
-
- 文章 · 前端 | 2天前 | 前端 · javascript · 滚动容器 · 用户体验 · 浏览器 API · JavaScript scrollIntoView container: nearest 嵌套滚动容器 前端滚动
- scrollIntoView 的 container 怎么选:嵌套滚动容器避免页面被带走
- 447浏览 收藏
-
- 文章 · 前端 | 2天前 | spa · Web API · 前端教程 · 浏览器路由 · 前端路由 SPA路由 Navigation API History API navigate事件
- Navigation API 如何统一拦截 SPA 路由:从 History API 迁移的最小方案
- 183浏览 收藏
-
- 文章 · 前端 | 3天前 | 性能优化 · 编译器 · typescript · CI · TypeScript 7 checkers builders CI并行编译
- TypeScript 7 并行编译怎么调:checkers、builders 与 CI 资源预算
- 386浏览 收藏
-
- 文章 · 前端 | 3天前 | 布局 · 前端 · css · anchor-name CSS anchor positioning position-try
- CSS Anchor Positioning 做悬浮提示:锚点边界与回退写法
- 389浏览 收藏
-
- 文章 · 前端 | 3天前 | 浏览器 · javascript · 前端性能 · Web API · 响应式设计 · JavaScript 响应式布局 ResizeObserver contentRect disconnect
- JavaScript ResizeObserver 如何避免响应式死循环:contentRect、阈值与 disconnect 边界
- 257浏览 收藏
-
- 文章 · 前端 | 4天前 |
- JavaScript View Transitions 如何避免并发导航动画冲突:skipTransition、finished 与回滚状态
- 327浏览 收藏
-
- 文章 · 前端 | 4天前 |
- CSS container-type 实战:让卡片组件按自身宽度切换布局
- 266浏览 收藏
-
- 文章 · 前端 | 4天前 |
- HTML dialog closedby 如何区分 Esc、点击外部与强制关闭:关闭原因和兼容降级
- 479浏览 收藏
-
- 文章 · 前端 | 4天前 |
- CSS backdrop-filter 怎么控制毛玻璃层:叠加顺序、透明背景与降级检查
- 496浏览 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 543次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 516次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 500次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 485次学习
-
- SuperCLUE
- SuperCLUE是权威的中文大语言模型综合评测基准,涵盖语言理解、知识应用、AI Agent智能体及安全性等12项核心能力。通过多轮对话与客观测试,定期发布榜单与技术报告,为模型研发、优化及行业选型提供科学依据。
- 117次使用
-
- C-Eval
- 深入了解C-Eval中文评估套件,涵盖52个学科与4级难度。本文详解其功能特点、Zero-shot/Few-shot使用方法及代码示例,助您全面评测LLM中文理解与泛化能力。
- 38次使用
-
- Gradio
- Gradio是一个用于构建机器学习和数据科学Web应用的开源Python库。支持快速创建交互界面,获Google、Meta等大厂青睐,适合模型演示、部署反馈及调试。
- 114次使用
-
- AutoGPT
- AutoGPT是基于GPT-4的开源AI代理平台,拥有超10万GitHub星标。本文介绍其低代码界面、自动化工作流功能、系统配置要求及安装步骤,助您高效部署和管理AI Agent。
- 118次使用
-
- Dataify
- Dataify是专注AI生态的一站式数据服务平台,整合全球住宅代理、多源数据采集API及高质量训练数据集。支持LLM训练、跨境电商及金融分析,解决数据孤岛难题,助力企业智能化转型。
- 25次使用
-
- 馃帀Vue3+Vite2.6+TypeScript+ant-design-vue+egg.js 涓€閿瀯寤虹鐞嗗墠鍚庡彴绠$悊绯荤粺
- 2023-02-24 485浏览
-
- AI 流式输出断线后怎么续接:事件 ID、重连窗口与重复片段去重
- 2026-08-25 231浏览
-
- Node.js 24.16.0 LTS 发布后怎么升级:从特性筛选到灰度上线
- 2026-06-17 375浏览
-
- Chrome 151 Beta 新增 WheelEvent.momentum:滚动惯性事件能区分了
- 2026-07-08 425浏览
-
- Chrome 152 移除 Private Aggregation API:网站开发者先查哪些隐私接口影响
- 2026-08-26 242浏览

