Vite 5.1 新鲜出炉,龙码精神!

大家好,这里是大家的林语冰。持续关注,坚持阅读,每天一次,进步一点

免责声明

本文属于是语冰的直男翻译了属于是,略有删改,仅供粉丝参考。英文原味版请传送 Vite 5.1 is out!

本期共享的是 ------ Vite 团队官宣 Vite 5.1 正式上线!龙年第一波前端内卷正式开始。Are you ready?

Vite 5 于去年 11 月官宣,代表着 Vite 及其生态天天向上。几周前,我们举杯同庆 npm 周下载量高达 1_000 万次,以及 Vite 源码库吸收了 900 名贡献者。今天,我们十分鸡冻地官宣:Vite 5.1 正式发布。


Vite 运行时 API

Vite 5.1 新增了对全新 Vite Runtime API 的实验性支持。它允许首先使用 Vite 插件处理任何代码,然后再运行。这与 server.ssrLoadModule 截然不同,因为运行时实现与服务器解耦了。这使得库和框架作者可以在服务器和运行时之间实现自己的通信层。全新的 Vite Runtime API 旨在稳定后,取代 Vite 现在的 SSR primitives(服务端渲染原语)。

全新的 Vite Runtime API 带来了一大波龙年福利:

  • SSR 期间支持 HMR(热模块替换)
  • 它与服务器解耦,因此没有限制可以使用单个服务器的客户端数量,每个客户端都有自己的模块缓存,我们甚至可以按照个人喜好与其通信,包括但不限于使用消息信道/fetch 调用/直接的函数调用/websocket。
  • 它不依赖任何 node/bun/deno 的内置 API,因此可以在任何环境中运行。
  • 它可以轻而易举地与具有自己的运行代码机制的工具集成,举个栗子,我们可以提供一个运行程序,使用 eval 取代 new AsyncFunction

初始想法由 P.P. 提出,并由 AntFu 作为 vite-node 包实现,驱动了 Nuxt 3 Dev SSR,后来也作为 Vitest 的基建。所以 vite-node 的整体思想已经经过"路遥知码力"的长期考验。此乃 V.S. 对 API 的全新迭代,它已经在 Vitest 中重现了 vite-node,并在将其集成到 Vite 核心库时痛改前非,使 Vite Runtime API 更灵活给力。此 PR(拉取请求)已经沉淀了整整一年。


功能

改进了 .css?url 的支持

将 CSS 文件作为 URL 导入现在可以码到成功。此乃 Remix 向 Vite 迁移的最后一个阻碍。

build.assetsInlineLimit 现在支持回调

用户现在可以提供一个返回布尔值的回调函数,选用或弃用特定资源的内联。如果返回了 undefined,那就应用默认逻辑。

改进了循环导入的 HMR

在 Vite 5.0 中,循环导入中接受的模块总是会触发整页重载,即使它们可以在客户端被妥善处理。现在此问题已经放飞自我,允许在无需重载整页时应用 HMR,但如果在 HMR 期间发生任何错误,页面则会重载。

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

从历史上看,除了链接包之外,Vite 会外部化所有软件包。这个全新的 ssr.external: true 选项可用于强制外部化所有包,包括链接包。在我们想模拟所有外部包的常见情况的 monorepos(多库开发)测试中,这十分方便,或者当使用 ssrLoadModule 加载任意文件,且我们希望始终使用外部包时,因为我们不关心 HMR。

在预览服务器中暴露 close 方法

预览服务器现在暴露了一个 close 方法,该方法会妥善拆除服务器,包括所有开启的 socket(套接字)连接。

性能优化

Vite 每次发布都变得越来越快,且 Vite 5.1 充满了性能优化。我们使用 vite-dev-server-perf 测量了 Vite 4.0 以来所有次版本的 10K 模块(25 层深度树)加载时间。这是一个衡量 Vite 无打包方案效果的优秀基准测试。每个模块都是一个携带计数器的迷你 TS 文件,并导入到模块树中的其他文件,因此这主要测量对单独模块执行请求的时间开销。在 Vite 4.0 中,在轻薄游戏本上加载 10K 模块耗时 8 秒。我们在聚焦性能的 Vite 4.3 更胜一筹,我们能在 6.35 秒内加载它们。在 Vite 5.1 中,我们又双叒叕实现了性能飞跃。Vite 现在可以在 5.35 秒内服务 10K 模块。

该基准测试的结果在 Headless Puppeteer 上运行,这是版本跑分的优秀方案。但它们并不代表用户的经历时长。当在 Chrome 的隐身窗口中运行相同数量的 10K 模块时,如下所示:

10K 模块 Vite 5.0 Vite 5.1
加载时间 2892ms 2765ms
加载时间(缓存) 2778ms 2477ms
完全重载 2003ms 1878ms
完全重载(缓存) 1682ms 1604ms

在线程中运行 CSS 预处理器

Vite 现在可选择支持在线程中运行 CSS 预处理器。我们可以使用 css.preprocessorMaxWorkers: true 启用它。对于 Vuetify 2 项目,启用此功能后,开发启动时间狂跌 40%。

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

我们可以设置 optimizeDeps.holdUntilCrawlEnd: false 切换到新型依赖优化策略,这可能有助于大型项目。我们正在考虑将来默认切换到此策略。

缓存检查更快解析

fs.cachedChecks 优化现在默认启用。在 Windows 中,tryFsResolve 的速度爆涨约 14 倍,并且在三角基准测试中解析 id 的速度全面爆涨约 5 倍。

内部性能优化

开发服务器的性能斩获了若干增量提升。一个新型中间件可以在 304 时短路。我们避免了热路径的 parseRequest。Rollup 现已被正确懒加载。


废弃功能

我们会继续尽量减少 Vite 的 API 接口,使 Vite 能够长期维护。

已弃用 import.meta.globas 选项

标准已移至 import Attributes(导入属性),但我们目前不打算使用新选项取代 as。相反,我们建议用户切换到 query

移除的实验性构建时预打包

构建时预打包是 Vite 3 增加的一项实验性功能,现已被移除。随着 Rollup 4 将其解析器切换到原生,且 Rolldown 正在研发中,此功能的性能和开发与构建不一致的情况都不再有效。我们希望继续改良开发/构建的一致性,并得出结论,使用 Rolldown 进行"开发时预打包"和"生产构建"是更优选择。Rolldown 还可能在构建时实现缓存,这比依赖预打包更高效。


加入 Vite 社区

我们特别鸣谢 Vite 核心库的 900 名贡献者,以及不断推动生态系统蒸蒸日上的插件、集成、工具和翻译的维护者。如果您也是 Vite 爱好者,我们诚邀您参与开源并辅助我们。瞄一下我们的贡献指南,然后开始分类问题、审查 PR、回答 GitHub 讨论的问题,以及援助 Vite Land 社区的其他道友。


实名感谢

Vite 5.1 的诞生得益于我们的贡献者社区、生态系统中的维护者以及 Vite 团队。感谢赞助 Vite 开发的个人和公司。StackBlitz、Nuxt Labs 和 Astro 聘请了 Vite 团队成员。也感谢 Vite 的 GitHub 赞助商、Vite 的 Open Collective 和尤雨溪(Evan You)的 GitHub 赞助商。

本期话题是 ------ 你更青睐 Vite 还是 Webpack?欢迎在本文下方群聊自由言论,文明共享。谢谢大家的点赞,掰掰~

《前端 9 点半》每日更新,持续关注,坚持阅读,每天一次,进步一点

相关推荐
xjt_090114 分钟前
基于 Vue 3 构建企业级 Web Components 组件库
前端·javascript·vue.js
我是伪码农26 分钟前
Vue 2.3
前端·javascript·vue.js
夜郎king1 小时前
HTML5 SVG 实现日出日落动画与实时天气可视化
前端·html5·svg 日出日落
辰风沐阳1 小时前
JavaScript 的宏任务和微任务
javascript
夏幻灵2 小时前
HTML5里最常用的十大标签
前端·html·html5
冰暮流星2 小时前
javascript之二重循环练习
开发语言·javascript·数据库
Mr Xu_2 小时前
Vue 3 中 watch 的使用详解:监听响应式数据变化的利器
前端·javascript·vue.js
未来龙皇小蓝2 小时前
RBAC前端架构-01:项目初始化
前端·架构
程序员agions2 小时前
2026年,微前端终于“死“了
前端·状态模式
万岳科技系统开发2 小时前
食堂采购系统源码库存扣减算法与并发控制实现详解
java·前端·数据库·算法