跳至内容

Vite 5.1 发布!

2024年2月8日

Vite 5.1 Announcement Cover Image

Vite 5 于去年 11 月发布,标志着 Vite 及其生态系统迈出了又一大步。几周前,我们庆祝了每周 1000 万次 npm 下载量和 Vite 仓库 900 位贡献者。今天,我们很高兴地宣布 Vite 5.1 发布。

快速链接:文档更新日志

其他语言的文档:简体中文日本語EspañolPortuguês한국어Deutsch

在 StackBlitz 中在线试用 Vite 5.1:vanillavuereactpreactlitsveltesolidqwik

如果您是 Vite 新手,我们建议您先阅读入门指南功能指南。

要保持最新状态,请关注我们的XMastodon

Vite 运行时 API

Vite 5.1 添加了对新的 Vite 运行时 API 的实验性支持。它允许通过先使用 Vite 插件处理来运行任何代码。它与 server.ssrLoadModule 不同,因为运行时实现与服务器分离。这使库和框架作者能够实现他们自己的服务器和运行时之间的通信层。一旦此新 API 稳定,它将取代 Vite 当前的 SSR 原语。

新 API 带来了许多好处

  • 支持 SSR 期间的 HMR。
  • 它与服务器分离,因此对多少个客户端可以使用单个服务器没有限制 - 每个客户端都有自己的模块缓存(您甚至可以根据需要与之通信 - 使用消息通道/获取调用/直接函数调用/Websocket)。
  • 它不依赖于任何 Node/Bun/Deno 内置 API,因此它可以在任何环境中运行。
  • 它易于与具有自己代码运行机制的工具集成(例如,您可以提供一个运行程序来使用 eval 而不是 new AsyncFunction)。

最初的想法由 Pooya Parsa 提出,并由Anthony Fu作为vite-node包实现,以为 Nuxt 3 Dev SSR 提供动力,后来也用作Vitest的基础。因此,vite-node 的总体思路已经过相当长一段时间的实战检验。这是Vladimir Sheremet对 API 的新迭代,他已经在 Vitest 中重新实现了 vite-node,并在将其添加到 Vite Core 时吸取了经验教训,使 API 更加强大和灵活。PR 花了一年的时间才完成,您可以在这里查看其演变和与生态系统维护者的讨论

信息

Vite 运行时 API 演变为模块运行器 API,在 Vite 6 中作为环境 API的一部分发布。

功能

改进对 .css?url 的支持

现在,将 CSS 文件作为 URL 导入可以可靠且正确地工作。这是 Remix 迁移到 Vite 的最后一个障碍。参见(#15259)。

build.assetsInlineLimit 现在支持回调

用户现在可以提供一个回调,该回调返回一个布尔值以选择加入或选择退出特定资源的内联。如果返回 undefined,则应用默认逻辑。参见(#15366)。

改进循环导入的 HMR

在 Vite 5.0 中,循环导入中接受的模块始终触发完整的页面重新加载,即使它们可以在客户端中正常处理。现在已放宽此限制,允许 HMR 应用而无需完全重新加载页面,但如果在 HMR 期间发生任何错误,则页面将重新加载。参见(#15118)。

支持 ssr.external: true 以外部化所有 SSR 包

从历史上看,Vite 会外部化所有包,除了链接的包。此新选项可用于强制外部化所有包,包括链接的包。这在 monorepo 中的测试中非常方便,在这些测试中,我们希望模拟所有包都被外部化的常见情况,或者在使用 ssrLoadModule 加载任意文件时,我们希望始终外部化包,因为我们不关心 HMR。参见(#10939)。

在预览服务器中公开 close 方法

预览服务器现在公开了一个 close 方法,该方法将正确地拆除服务器,包括所有打开的套接字连接。参见(#15630)。

性能改进

Vite 在每次发布中都变得越来越快,Vite 5.1 充满了性能改进。我们使用vite-dev-server-perf测量了从 Vite 4.0 开始的所有次要版本的 10K 模块(25 层深树)的加载时间。这是一个衡量 Vite 无捆绑方法效果的良好基准。每个模块都是一个带有计数器并导入树中其他文件的 TypeScript 小文件,因此这主要测量执行单独模块请求所需的时间。在 Vite 4.0 中,在 M1 MAX 上加载 10K 模块需要 8 秒。我们在Vite 4.3 中专注于性能取得了突破,并且能够在 6.35 秒内加载它们。在 Vite 5.1 中,我们实现了另一项性能飞跃。Vite 现在可以在 5.35 秒内提供 10K 模块。

Vite 10K Modules Loading time progression

此基准测试在 Headless Puppeteer 上运行,是比较版本的好方法。但是,它们并不代表用户体验的时间。在 Chrome 的隐身窗口中运行相同的 10K 模块时,我们有

10K 模块Vite 5.0Vite 5.1
加载时间2892ms2765ms
加载时间(已缓存)2778ms2477ms
完全重新加载2003ms1878ms
完全重新加载(已缓存)1682ms1604ms

在线程中运行 CSS 预处理器

Vite 现在可以选择在线程中运行 CSS 预处理器。您可以使用css.preprocessorMaxWorkers: true启用它。对于 Vuetify 2 项目,启用此功能后,开发启动时间减少了 40%。在 PR 中有其他设置的性能比较。参见(#13584)。提供反馈

改进服务器冷启动的新选项

您可以设置 optimizeDeps.holdUntilCrawlEnd: false 以切换到一种新的依赖项优化策略,这可能有助于大型项目。我们正在考虑将来默认切换到此策略。提供反馈。(#15244)

使用缓存检查加快解析速度

fs.cachedChecks 优化现在已默认启用。在 Windows 中,使用它时 tryFsResolve 快了约 14 倍,并且在三角形基准测试中,解析 ID 的总体速度提高了约 5 倍。(#15704)

内部性能改进

开发服务器获得了一些增量性能提升。一个新的中间件可以在 304 上短路(#15586)。我们在热路径中避免了 parseRequest#15617)。Rollup 现在已正确延迟加载(#15621)

弃用

我们继续尽可能减少 Vite 的 API 界面,以使项目长期可维护。

弃用 import.meta.glob 中的 as 选项

标准已迁移到导入属性,但我们目前不打算用新选项替换 as。相反,建议用户切换到 query。参见(#14420)。

删除实验性构建时预捆绑

构建时预捆绑是 Vite 3 中添加的实验性功能,现已删除。随着 Rollup 4 将其解析器切换到原生,并且 Rolldown 正在开发中,此功能的性能和开发与构建不一致性问题不再有效。我们希望继续改进开发/构建一致性,并得出结论,使用 Rolldown 进行“开发期间预捆绑”和“生产构建”是未来更好的选择。Rolldown 还可以以比依赖项预捆绑更有效的方式在构建期间实现缓存。参见(#15184)。

参与进来

我们感谢900 位 Vite 核心贡献者,以及插件、集成、工具和翻译的维护者,他们不断推动生态系统向前发展。如果您喜欢 Vite,我们邀请您参与并提供帮助。查看我们的贡献指南,并加入问题分类PR 审查、在GitHub 讨论中解答问题,并在Vite Land中帮助社区中的其他人。

致谢

Vite 5.1 的发布离不开我们社区贡献者、生态系统中的维护者以及Vite 团队的支持。特别感谢为 Vite 开发提供赞助的个人和公司。感谢StackBlitzNuxt LabsAstro聘用 Vite 团队成员。还要感谢Vite 的 GitHub 赞助商Vite 的 Open CollectiveEvan You 的 GitHub 赞助商

在 MIT 许可证下发布。 (ccee3d7c)