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 点半》每日更新,持续关注,坚持阅读,每天一次,进步一点

相关推荐
小曲曲1 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•2 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS3 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜4 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点4 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow4 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o4 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic5 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā5 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年7 小时前
react中useMemo的使用场景
前端·react.js·前端框架