Vite 8.1 发布公告
Vite 8.1 发布公告
2026 年 6 月 23 日
Vite 8 在三月发布，其核心是由 Rolldown 驱动的统一打包器，为后续改进打开了大门。目前，Vite 每周下载量已达 4160 万次，几乎追平了 Vite 7 的总下载量。在解决升级回归问题的同时，我们也在持续开发新功能，并很高兴地宣布：Vite 8.1 正式发布了！
快速链接：
你可以使用 vite.new 在线体验 Vite 8.1，或者运行 pnpm create vite 在本地用你喜欢的框架搭建一个 Vite 应用。更多信息请参阅入门指南。
我们诚邀你帮助改进 Vite（加入 Vite Core 的 1200+ 贡献者行列），以及改进我们的依赖、插件和生态项目。请参阅我们的贡献指南。一个很好的入门方式是分类处理 issue、审查 PR、基于未解决的 issue 提交测试 PR，以及在 Discussions 或 Vite Land 的帮助论坛中帮助他人。如果你有任何问题，欢迎加入我们的 Discord 社区，并在 #contributing 频道与我们交流。
通过关注我们的 Bluesky、X 或 Mastodon 账号，及时了解更新动态，并与其他基于 Vite 构建的开发者建立联系。
新特性
实验性打包开发模式
实验性的打包开发模式现已可用。这之前被称为“全量打包模式”。该模式旨在提升那些因模块数量众多而性能受影响的巨型应用的开发性能。
在我们最初对一个加载了 10,000 个 React 组件的应用进行的测试中，与未打包的开发服务器相比，打包开发模式实现了约 15 倍的启动速度提升和 10 倍的全量页面重新加载速度提升，同时无论应用规模大小，都能保持即时响应的 HMR。对真实应用进行的早期测试也显示了类似的提升：Linear 团队观察到冷启动渲染速度提升最高达 3 倍，全量重载速度提升约 40%，网络请求数量减少了 10 倍。
::: details 为什么需要打包开发模式？
Vite 以其免打包的开发服务器方式而闻名，这也是 Vite 在最初推出时能够快速流行起来的主要原因之一。这种方法最初是一项实验，旨在探索在不进行传统打包的情况下，能将开发服务器性能提升到何种极限。
然而，随着项目规模和复杂度的增长，Vite 免打包的开发方式在开发过程中可能会导致性能下降。由于每个模块都是单独获取的，浏览器必须处理大量的请求，这增加了启动和刷新的开销。这种影响在大型应用中尤为明显，并且当开发者处于网络代理之后时情况会更加严重，导致刷新时间变长，开发者体验变差。
打包开发模式允许不仅在生产环境，而且在开发过程中也提供打包后的文件，从而结合了两者的优点：
- 即使是大型应用也能快速启动
- 减少页面刷新时的网络开销
- 在 ESM 输出的基础上保持高效的 HMR
:::
目前，该模式侧重于浏览器端、基础插件和主要功能。如果你使用了第三方插件，该插件可能无法在此模式下正常工作。如果你使用了一些次要功能，这些功能也可能无法正常工作。我们正在努力扩大支持范围，并准备一份文档以阐明插件端可能需要进行的更改。有关路线图的更多详情，请参阅设计文档。
要启用此模式，你可以传入 --experimental-bundle 参数，或者在 vite.config.js 中添加 experimental.bundledDev: true：
ts [vite.config.js]
import { defineConfig } from 'vite'
export default defineConfig({
experimental: {
bundledDev: true,
},
})欢迎在讨论区分享你的反馈。
实验性 Chunk Import Map
在输出包中，chunk 的导入语句包含了该 chunk 的哈希值。这是为了确保当 chunk 内容发生变化时，能够加载新的 chunk。然而，这也导致了导入发生变化的 chunk 的 chunk 哈希值发生改变，从而将这种变化级联传递给所有直接或间接导入该 chunk 的 chunk。
dot
digraph chunk_hash_cascade {
rankdir=TB
node [shape=box style="rounded,filled" fontname="Arial" fontsize=11 margin="0.25,0.12" fontcolor="${#3c3c43|#ffffff}" color="${#c2c2c4|#3c3f44}"]
edge [color="${#67676c|#98989f}" fontname="Arial" fontsize=10 fontcolor="${#67676c|#98989f}"]
bgcolor="transparent"
utils [label="utils.[e5f6 → 88xx].js\ncontent edited" fillcolor="${#fcf4dc|#38301a}" color="${#e0a800|#d4a72c}"]
page [label="page.[c3d4 → 77yy].js\nre-hashed by cascade" fillcolor="${#fde8e8|#3a1f22}" color="${#d5393e|#f66f81}"]
entry [label="entry.[a1b2 → 99zz].js\nre-hashed by cascade" fillcolor="${#fde8e8|#3a1f22}" color="${#d5393e|#f66f81}"]
entry -> page [label=" imports (embeds hash)\l" color="${#d5393e|#f66f81}" fontcolor="${#d5393e|#f66f81}"]
page -> utils [label=" imports (embeds hash)\l" color="${#d5393e|#f66f81}" fontcolor="${#d5393e|#f66f81}"]
}实验性的 chunk import map 功能利用 import maps 解决了这个问题，并提升了缓存效率。该功能基于 Rolldown 的特性构建，并增加了对 Vite 特定功能的支持。特别感谢 Taisei Mima 对此功能的研究和初始实现！
请注意，experimental.renderBuiltUrl 目前无法与此选项同时使用。
请参阅指南和选项文档了解更多详情。欢迎在讨论区分享你的反馈。
Wasm ESM 集成支持
Vite 现在支持 Wasm ESM 集成提案。你现在可以直接导入 wasm 文件并使用其导出的函数：
ts
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 选项，以不区分大小写的方式匹配文件。
ts
// 匹配 ./dir/Module1.js
const modules = import.meta.glob('./dir/module*.js', {
caseSensitive: false,
})自定义 HTML 元素和属性的资源发现
以前，Vite 只会发现预定义的元素和属性中的资源。现在，你可以使用 html.additionalAssetSources 选项来添加更多的元素和属性。
html
<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"
/>
ts [vite.config.js]
import { defineConfig } from 'vite'
export default defineConfig({
html: {
additionalAssetSources: {
'html-import': {
srcAttributes: ['src'],
},
img: {
srcAttributes: ['data-src-dark', 'data-src-light'],
},
},
},
})其他变更
请查看更新日志以了解其他功能和错误修复。
致谢
Vite 8.1 的发布离不开我们社区的贡献者、生态系统的维护者以及 Vite 团队的努力。Vite 由 VoidZero 提供支持，并与 Bolt 和 Nuxt Labs 合作。我们也想感谢 Vite 的 GitHub Sponsors 和 Vite 的 Open Collective 上的赞助商。
帮助我们改进文档
发现翻译问题或内容错误？请告诉我们。