序
最近vite发布4.3-Beta版本,vite团队在这个版本重点是工作是性能优化,并且取得了惊人的成果🥳
Rust vs JavaScript
???
JavaScript也可以写出性能足够好的程序
Rust时候提升新一波了性能了(敲打)🤔🔨
当然vite的性能提升,也离不开esbuild与SWC等的支持。(不是引战😄)
性能提升
简单翻译一下:
我在我的Windows电脑上用Vite 4.3 beta测试了一些基准测试。
Vite 4.3的冷启动时间快3倍,热启动时间也快1.3倍🏎。更重要的是,当使用SWC插件时,Vite 4.3的冷启动时间现在比涡轮背包快1.5s。
数据对比
下面是核心成员:翠 / green,给出的测试数据:
Start Time (启动时间)
相比于vite4.2.1,vite4.3-beta使用plugin-react或plugin-react-swc插件的冷启动和热启动时间都有显著缩短,分别提升了3.5倍和1.3倍,4.4倍和1.6倍12。
HMR(热更新时间)
相比于vite4.2.1,vite4.3-beta使用plugin-react或plugin-react-swc插件的根HMR和叶子HMR时间都有明显缩短,分别提升了1.7倍和2.3倍,1.3倍和1.7倍12。
FCP(首次有内容渲染的时间)
相比于vite4.2.1,vite4.3-beta使用plugin-react插件的FCP平均值从38031降低到3083,快了12倍
其他工具对比
与其他构建工具的对比:相比于webpack、farm、rspack和turbopack,vite4.3-beta在启动时间和热更新时间上都有优势,特别是在使用plugin-react-swc插件时,其冷启动时间比turbopack快了1.5秒,热启动时间比turbopack快了1.8秒
此处respack数据存在误差。
更多对比细节
为什么vite可以这么快
看了最近vite的CHANGELOG.md,发现从vite4.2.1到v4.3.0-beta.4,性能提升的相关commit 就有多达25个。重构相关的17个。我一一看了一遍,只能说 vite团队太强了,很多都是尽可能的压榨性能,不放过每一个可能提升性能的点,当然前提也保证API的健壮性。
1、对一些语法的替换
我简单的列出几个例子。
禁用了
new URL()
perf: avoid new URL() in hot path (#12654) (f4e2fdf), closes #12654
打开浏览器的时候,禁用
execSync
使用exec
。perf: avoid execSync on openBrowser (#12510) (a2af2f0), closes #12510
将startsWith、endsWith替换为
===
perf: replace endsWith with === (#12539) (7eb52ec), closes #12539
perf: replace startsWith with === (#12531) (9cce026), closes #12531
2、优化一些同步的操作。
3、去除了一些不必要的验证,减少 vite 客户端路径检查
4、对嵌套优化的 deps 使用更简单的解析
5、重构深度导入的 package.json、提高 package.json 解析速度
值得推荐的一个vite插件:
vite团队成员开发。是一个vite文件预热插件,可以尽早的开始处理一些我们必须加载的vite文件。
Vite 的核心是一个按需文件服务器。当收到请求时,它将转换文件并提供服务。这意味着我们只做请求的工作,保持开发服务器的快速运行。
但是,有时我们会提前知道在开始开发周期时会请求哪些文件。我们可以提前开始转换文件,而不是在打开页面之前让 Vite 处于空闲状态,这样当它被请求时,它就会被缓存并可以立即提供。
现在该插件依赖vite4.3的一些新特性:
warmup可以在server init上启动而不是server listen
直接对 HTML 文件进行预热
同时推动用户升级到4.3
用起来也相当简单。
1 | // vite.config.js |
结语
前段时间,Vercel 推出了下一代打包工具:Turbopack,并宣称其比 Vite 快 10 倍。(此处未被证实)
但是如今,Vite 在某些方面已经超越了 Turbopack。
还有根据官方的一些信息,当稳定后 vite-plugin-warmup 插件功能会进入vite核心中。大家感兴趣可以提前升级到vite4.3-beta安装此插件,体验一下。
Follow 认证
This message is used to verify that this feed (feedId:62851852422645760) belongs to me (userId:56870707744741376). Join me in enjoying the next generation information browser https://follow.is.