大家好,这里是大家的林语冰。持续关注,坚持阅读,每天一次,进步一点。
免责声明
本文属于是语冰的直男翻译了属于是,略有删改,仅供粉丝参考。英文原味版请传送 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.glob
的 as
选项
标准已移至 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 点半》每日更新,持续关注,坚持阅读,每天一次,进步一点。