近日,Vite
团队核心成员“翠”在社交平台表示,他在 Windows 机器上对 Vite 4.3 进行了基准测试,其初始加载速度有了大幅提升!其中,Vite 4.3 的冷启动时间快了 3 倍,热启动时间也快了 1.3 倍。另外,在使用 SWC
插件时,Vite 4.3 的冷启动时间比 turbopack 快 1.5 秒。截至发稿,Vite 4.3 处于 beta.4
阶段。
在开始之前,先来介绍三个相关概念:
- 启动时间:从“执行命令”到“在浏览器中触发 load 事件”的时间。
- 根 HMR 时间:从“根文件被更改”到“该文件在浏览器中执行”的时间。
- 叶子 HMR 时间:从“叶子文件被改变”到“该文件在浏览器中执行”的时间。
接下来就看看 Vite 4.3
相较于上一个版本在速度上都有哪些提升
测试概述
将 Farm
、Webpack
、Vite
、Rspack
和 Turbopack
进行测试对比,运行十次并取平均值。这里使用 Turbopack 的基准案例(1000 个 React 组件),参考:https://turbo.build/pack/docs/benchmarks。得到的结果如下:
最终得到的结论如下:
Vite(plugin-react)
的启动时间只比turbopack
慢 0.2s(冷启动)Vite(plugin-react)
的启动时间比turbopack
快 0.2s(热启动)Vite(plugin-react-swc)
的启动时间比turbopack
快 1.5s(冷启动)Vite(plugin-react-swc)
的启动时间比turbopack
快 1.8s(热启动)Vite
的叶 HMR 时间比turbopack
快Vite
的根 HMR 时间比turbopack
慢 5-10msrspack
的启动时间是Vite
的一半,但 HMR 的启动时间是Vite
的 10 倍
进行本测试的机器规格和其他信息:
- 运行时:Node.js 18.15.0
- 中央处理器:锐龙 9 5900X
- 内存:DDR4-3600 32GB
- 固态硬盘:WD Black SN750 NVME SSD
测试结果
对 Vite 4.3 beta.2
和 Vite 4.2.1
的启动时间分别进行测试:
- Vite 4.2.1 + plugin-react 3.1.0 / plugin-react-swc 3.2.0
- Vite 4.3.0-beta.2 + plugin-react 4.0.0-beta.0 / plugin-react-swc main
对比结果如下图所示:
根据图表可知:
- plugin-react 的启动时间:提升了 3.5 倍(冷)/ 1.3 倍(热)
- plugin-react-swc 的启动时间:提升了 4.4 倍(冷)/ 1.6 倍(热)
对 Vite 4.3 beta.2
和 Vite 4.2.1
的热更新时间进行对比测试:
根据图表可知:
- plugin-react 的启动时间:提升了 1.7 倍(根)/ 2.3 倍(叶子)
- plugin-react-swc 的启动时间:提升了 1.3 倍(根)/ 1.7 倍(叶子)
将 Vite 4.3 beta.2
与其他构建工具进行对比,得到的数据如下:
根据上表中的数据得到图表如下所示:
-
启动时间:
-
热更新时间:
除此之外,测试前后的 FCP(First Contentful Paint,即首次有内容渲染的时间) 对比如下: -
Vite 4.2.1 + plugin-react 3.1.0
- FCP 最大值:70334
- FCP 最小值:33901
- FCP 平均值:38031
-
Vite 4.3.0-beta.2 + plugin-react 4.0.0-beta.0
- FCP最大值:3348
- FCP 最低:2970
- FCP 平均值:3083
可以看到,Vite 4.3
比 Vite 4.2.1
的 FCP 平均快了 12 倍
半年前,Vercel 推出了下一代打包工具:Turbopack
,并宣称其比 Vite
快 10 倍。如今,Vite
在某些方面已经超越了 Turbopack
,期待未来 Vite
会有更好的表现。
参考资料:
- https://mp.weixin.qq.com/s/AOczsbcC_q5NUq0gi7xy3Q
- https://twitter.com/patak_dev/status/1644665027188670465
- https://gist.github.com/sapphi-red/db27f9c18ed31894e409224051119e1b