Vite 8.1 发布：实验性打包开发模式与 Wasm ESM 支持
译注：本文翻译自 Vite 官方博客 2026 年 6 月 23 日发布的《Vite 8.1 is out!》，原文链接见文末。为便于中文开发者阅读，部分表述做了本地化调整，技术细节以原文为准。
Vite 8 于今年 3 月发布，带来了由 Rolldown 驱动的单一统一打包器，为进一步改进打开了空间。目前 Vite 的周下载量已达 4160 万次，几乎追平 Vite 7 的累计下载量。在修复升级回归问题的同时，团队也在推进新功能开发，并正式发布 Vite 8.1。
你可以通过 vite.new 在线体验 Vite 8.1，或在本地使用 pnpm create vite 搭配任意框架脚手架创建项目。更多信息可查阅《Getting Started Guide》。
实验性打包开发模式（Bundled Dev Mode）
Vite 8.1 引入了实验性的打包开发模式支持，此前被称为「Full Bundle Mode」。该模式旨在改善因模块数量过多而性能受损的大型应用。
在初期测试中，一个加载 1 万个 React 组件的应用，打包开发模式相比非打包开发服务器实现了约 15 倍的启动速度和 10 倍的全页刷新速度，同时无论应用规模如何，HMR 都保持即时响应。真实应用的早期测试也显示出类似收益：Linear 团队观察到冷启动渲染最高快 3 倍，全量刷新约快 40%，网络请求数减少 10 倍。
为什么需要打包开发模式？
Vite 以非打包开发服务器著称，这也是它早期速度与流行度的重要原因。这种方式最初是一个实验，用来探索在不做传统打包的前提下，开发服务器性能究竟能推到多远。然而随着项目规模和复杂度增长，非打包开发方式在开发阶段的性能退化变得明显：由于每个模块单独请求，浏览器需要处理大量请求，增加了启动和刷新开销。这一问题在大型应用中尤为突出，当开发者处于网络代理之后时更为严重，导致刷新变慢、开发体验下降。
打包开发模式让打包文件不仅在生产环境、也在开发阶段被使用，从而兼顾两者优势：
- 即使是大型应用也能快速启动
- 减少页面刷新时的网络开销
- 在 ESM 输出之上保持高效的 HMR
目前该模式聚焦浏览器端、基础插件与主要功能。如果使用第三方插件，可能无法兼容；如果使用次要功能，也可能表现不佳。团队正在扩展支持范围，并准备一份文档说明插件侧可能需要做的改动。更多路线图细节可参见设计文档。
启用该模式，可以传入 --experimental-bundle，或在 vite.config.js 中添加 experimental.bundledDev: true：
// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
experimental: {
bundledDev: true,
},
})欢迎在讨论区反馈意见。
实验性 Chunk Import Map
在输出产物中，chunk 的 import 语句会包含该 chunk 的哈希，以确保 chunk 内容变化时能加载新版本。但这也会导致引用该 chunk 的 chunk 哈希发生变化，并级联影响到所有传递引用它的 chunk。
实验性的 chunk import map 功能利用 import maps 解决了这一问题，提升了缓存效率。该功能构建在 Rolldown 的能力之上，并增加了对 Vite 特有功能的支持。特别感谢 Taisei Mima 的研究与初步实现。
需要注意的是，experimental.renderBuiltUrl 目前与该选项不兼容。更多细节参见指南与选项文档，欢迎在讨论区反馈。
Wasm ESM 集成支持
Vite 现已支持 Wasm ESM integration 提案。你现在可以直接导入 wasm 文件并使用其导出的函数：
import { add } from './add.wasm'
console.log(add(1, 2)) // 3感谢 Menci 在该提案早期阶段创建并维护 vite-plugin-wasm，并将实现上游贡献到 Vite 核心。更多细节参见指南。
距离默认使用 Lightning CSS 更近一步
团队与 Lightning CSS 团队合作，补齐了 PostCSS 支持但 Lightning CSS 缺失的功能。Vite 8.1 现已具备以下两项能力：
- 允许在 CSS 文件中导入外部 CSS 文件（lightningcss#479）
- 由插件注册文件依赖（lightningcss#877）
团队正在考虑在下一个大版本中将默认 CSS 预处理器切换为 Lightning CSS。你可以通过 css.transformer: 'lightningcss' 试用，并在讨论区反馈。
import.meta.glob 支持大小写不敏感匹配
import.meta.glob 现在支持 caseSensitive 选项，可进行大小写不敏感的文件匹配：
// 匹配 ./dir/Module1.js
const modules = import.meta.glob('./dir/module*.js', {
caseSensitive: false,
})自定义 HTML 元素与属性的资源发现
此前 Vite 只会为预定义的元素和属性发现资源。现在可以通过 html.additionalAssetSources 选项添加更多元素与属性：
<html-import src="./some/other/file.html"></html-import>
<img
src="/layout-default.png"
data-src-dark="/layout-dark.png"
data-src-light="/layout-light.png"
/>// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
html: {
additionalAssetSources: {
'html-import': {
srcAttributes: ['src'],
},
img: {
srcAttributes: ['data-src-dark', 'data-src-light'],
},
},
},
})其他变更
其他功能与缺陷修复请查阅 Changelog。
致谢
Vite 8.1 的发布离不开社区贡献者、生态维护者以及 Vite 团队的努力。Vite 由 VoidZero 出品，并与 Bolt 和 Nuxt Labs 合作。同时感谢 Vite 在 GitHub Sponsors 与 Open Collective 上的赞助者。