2025上半年,最新 AI实践都在这!20+ 应用案例,任听一场议题就值回票价 了解详情
写点什么

Vite 4.3 正式发布,性能提升

  • 2023-04-24
    北京
  • 本文字数:1638 字

    阅读完需:约 5 分钟

Vite 4.3正式发布,性能提升

性能改进


在本次小版本迭代中,我们专注于提高开发服务器的性能。解析逻辑得到简化,热路径性能升级,缓存在查找 package.json、TS 配置文件和经过解析的 URL 时也更加智能。


感兴趣的朋友可以参考这篇博文,了解 Vite 贡献者们如何让 Vite 4.3 实现速度飞跃(https://sun0day.github.io/blog/vite/why-vite4_3-is-faster.html)。


与 Vite 4.2 相比,这个冲刺版本实现了全面的速度跃迁。


下面来看 sapphi-red/performance-compare 测得的性能改进,其中测试了开发服务器在对一款包含 1000 个 React 组件的应用进行冷、热启动时的时间,以及根、叶子组件的热替换(HMR)时间:






这里(https://gist.github.com/sapphi-red/25be97327ee64a3c1dce793444afdf6e)了解关于测试基准的更多信息。此次性能测试的运行硬件和 Vite 版本为:


  • CPU: Ryzen 9 5900X, 内存: DDR4-3600 32GB, SSD: WD Blue SN550 NVME SSD

  • Windows 10 Pro 21H2 19044.2846

  • Node.js 18.16.0

  • Vite 与 React Plugin 版本


1.Vite 4.2 (babel): Vite 4.2.1 + plugin-react 3.1.0

2.Vite 4.3 (babel): Vite 4.3.0 + plugin-react 4.0.0-beta.1

3.Vite 4.2 (swc): Vite 4.2.1 + plugin-react-swc 3.2.0

4.Vite 4.3 (swc): Vite 4.3.0 + plugin-react-swc 3.3.0


早期采用者还上报称,在测试 Vite 4.3 beta 版时,应用程序的实际开发启动速度提高了 1.5 至 2 倍,我们也期待大家上报更多性能感受。


我们将继续努力提高 Vite 性能。目前我们正在为 Vite 开发一款官方基准测试工具,借此记录每条 Pull Request 的性能指标。


另外,vite-plugin-inspect 现在提供更多与性能相关的功能,可帮助大家确定哪些插件或中间件构成了应用程序的性能瓶颈。


在页面加载完成后,可以使用 vite --profile (之后按 p)以保存开发服务器启动的 CPU 配置文件。您可以在应用程序中将其作为 speedscope 打开以检查性能问题。大家也可以在讨论区(https://github.com/vitejs/vite/discussions)或 Vite Discord(https://chat.vitejs.dev/)中与 Vite 团队分享您的发现。


Javascript 优化


编程语言优化自然是其中极为重要的一环,我们在 Vite 4.3 中对 JavaScript 做出了一系列有趣的优化。


用回调替代 *yield


Vite 使用 tsconfck 来查找和解析 tsconfig 文件。在此之前,tsconfck 会使用 *yield 来遍历目标目录,但该生成器的缺点在于需要占用大量内存空间以存储其 Generator 对象,而且在运行时中产生大量生成器上下文切换。为此,tsconfck 作者 @dominikg 从 v2.1.1 开始在核心中用回调替代


yield。


关于更多细节信息,请参阅(https://github.com/dominikg/tsconfck/pull/84/files)。


用 ===替代 startsWith & endsWith


我们还注意到,Vite 4.2 使用 startsWith 和 endsWith 来检查热门 URL 中的标题头和收尾“/”符号。我们比较了 str.startsWith(‘x’) 和 str[0] === ‘x’ 的执行基准,发现 === 比 startsWith 快大约 20%,同时要比 endsWith 快上约 60%。


避免重建正则表达式


Vite 需要大量的正则表达式来匹配字符串,其中大部分是静态的,所以只使用单件(singletons)会好很多。Vite 4.3 就改进了正则表达式功能,使其可以被正确重用。


不再生成自定义错误


Vite 4.2 中包含一些自定义错误,原本希望带来更好的开发体验。但这些错误可能导致额外的计算和垃圾收集负担,进而拖慢 Vite 的速度。在 Vite 4.3 当中,我们决定不再生成某些常见的自定义错误(例如 package.json NOT_FOUND 错误),转而直接抛出原始错误以换取更佳性能。


未来计划


我们计划在今年之内发布 Vite 的下一个大版本,以配合今年 9 月 Node.js 14 与 16 的生命周期结束计划。我们还发起了 Vite 5 的早期讨论与反馈收集通道,欢迎感兴趣的朋友积极参与(https://github.com/vitejs/vite/discussions/12466)。


相关阅读:

Rust、Go 和 Swift 在性能和并发性方面有何差异?

Rust 语言 2022 年度回顾:全球企业如何采用 Rust?

如何使用 rust 写内核模块

性能提升 40 倍!我们用 Rust 重写了自己的项目

2023-04-24 17:425364

评论

发布
暂无评论
发现更多内容

性能优化 - 伪共享

王玉川

c++ 缓存 性能 cpu

Source Map 原理

道道里

前端 webpack sourcemap

C++ 引用:他是坤坤也是鸡哥

子夜的星

c++ 引用 语法 引用参数函数

程序员培训班哪家教的比较好

小谷哥

WEB前端编程培训靠谱吗?

小谷哥

NodeJS 实战系列:如何设计 try catch

光毅

JavaScript node.js

运维训练营第十二课作业

好吃不贵

安全事件溯源分析场景

智维数据

大数据 数据可视化 智能运维 应用交付 流量分析系统

nCompass为医疗行业信息安全穿上“铠甲”

智维数据

大数据 数据可视化 智能运维 应用交付 流量分析系统

聚焦低碳发电,践行“双碳”之路

脑极体

华为 智能光伏

数据可视化图表系列解析——瀑布图

Data 探险实验室

数据分析 数据可视化 图表 可视化数据

通用池化框架commons-pool2功能拓展

FunTester

软件测试/测试开发 | 如何使用代理配置快速定位接口测试脚本问题?

测试人

软件测试 自动化测试 接口测试 测试开发

细胞分裂问题的原创解法

王玉川

原创 算法 递归 LeetCode 动态规划

树与二叉树深度剖析(二)

C++后台开发

数据结构 算法 二叉树 红黑树 Linux服务器开发

中国国际电子商务中心与易观分析联合发布:2022年3季度全国网络零售发展指数同比增长1.5%

易观分析

零售 电商

性能优化 - 访问局部性

王玉川

c++ 性能 cpu 访问局部性

深度学习快速上手——基于 MegEngine 的 LeNet 快速训练与部署

MegEngineBot

深度学习 开源 MegEngine

从人工分析到智能分析,流量分析如何快速上手?

智维数据

智能运维 应用交付 可视化数据 流量分析系统

大数据培训课程靠谱吗?

小谷哥

一文揭晓,我是如何在Linux中查找自如

蔡农曰

Linux 程序员 运维 后端

Perfkit - 性能分析与测量工具集

王玉川

Linux 性能优化 Dockerfile ebpf perf

C++ Lambda表达式

王玉川

c++ Lambda

技术升级落地需要天时、地利、人和

石云升

极客时间 1月月更 技术领导力实战笔记

Java编程培训中心怎么样呢

小谷哥

C++ const与指针

王玉川

c++ 指针 常量 const

web前端线下培训学习靠谱吗?

小谷哥

软件测试/测试开发 | 接口自动化测试如何进行认证?

测试人

软件测试 自动化测试 接口测试 测试开发

CBM业务模型是什么和为什么?

涛哥 数字产品和业务架构

企业架构

华为云发布冷启动加速解决方案:助力Serverless计算速度提升90%+

华为云开发者联盟

Serverless 华为云 冷启动 Cold Start 进程级快照

可观测性之网站性能调优的实际案例-小白都看的懂

Yestodorrow

前端 可观测性 网站性能

Vite 4.3正式发布,性能提升_大前端_丁晓昀_InfoQ精选文章