Vite 8.1 这个打包开发模式让我决定把万级模块的项目全切过去

做过万级模块项目的同学应该都有这个体验：本地开发启动要等几十秒，每次改个组件整个页面要刷新半天，HMR 虽然快但遇上全局状态变化还是得手动刷新。Vite 8.1 这次 experimental-bundle 模式让我眼前一亮——他们把生产构建的打包逻辑接进了开发服务器，Linear 团队实测冷启动快 3 倍，全量刷新快 40%，网络请求少了 90%。

这个模式简单说就是：开发时也走打包流程，但输出格式保持 ESM，这样既有了打包的性能收益，又保留了 HMR 的能力。官方叫它 Bundled Dev Mode，之前叫 Full Bundle Mode。

开启方式很简单，一行配置：

// vite.config.js
export default defineConfig({
  experimental: {
    bundledDev: true,
  },
})

或者直接命令行加参数：vite --experimental-bundle

为什么以前不这么做？Vite 当初主打的就是 unbundled dev——每个模块独立请求，浏览器直接跑原生 ESM，这样省去了打包环节，所以启动快、HMR 准。但这套方案有个前提：模块数量不能太多。当项目大到几千个组件时，浏览器的网络请求开销就成了瓶颈，冷启动要等所有模块解析完，全量刷新要重新请求所有文件。

Bundled Dev Mode 的思路是：用 Rolldown 在开发时做轻量打包，把一万个组件打成一个或几个 bundle 输出，浏览器只需请求这几个文件；同时保持 HMR 走 ESM 模块热更新，不走完整刷新。这样两边的好处都占了。

Linear 团队的实测数据：冷启动渲染快 3 倍，全量刷新快 40%，网络请求从 10000+ 降到几百个。他们做的是项目管理工具，组件数量级大家应该有概念。

不过目前还在实验阶段，有几个限制：第三方插件可能不兼容；一些边角功能可能失效；experimental.renderBuiltUrl 在这个模式下不工作。官方说正在完善插件兼容文档，路线图上有明确时间表。

如果你现在就想尝鲜，建议先用新项目或者次要项目试水，主力项目等正式版。主要踩坑点：检查你的 vite 插件是否支持——目前主流插件正在跟进中，Rollup 生态的插件兼容性最好，Vite 专属插件需要看版本。

还有一个优化点值得注意：8.1 同时推出了 experimental chunk import map，解决的是打包后 chunk 哈希级联更新的问题。简单说，以前改了 A.js 会导致引用 A 的 B.js 哈希也变，进而导致引用 B 的 C.js 也变，一层层传染。chunk import map 用 import map 解决了这层依赖，让只有真正受影响的 chunk 才会更新，不传染。

这个组合拳打下来，Vite 在大型项目里的开发体验会有明显提升。官方数据显示周下载量已达 4160 万，基本追平 Vite 7。如果你在维护中大型前端项目，这个版本值得密切关注，保守估计下个正式版就可以切入了。

下一步你可以做的：1）翻一下自己的项目配置，看 vite 插件列表里有没有不在兼容列表里的；2）用 vite new 起一个新项目加上 --experimental-bundle 跑一遍，感受一下启动速度；3）关注 Vite 官方 discussion #22747，把你的场景反馈上去。