Vite 4.3 正式发布-今日必看

Vite 4.3 正式发布

来源：焦糖老干妈发布时间：2023-04-24 15:01

大家好，我是Echa。

好消息，2023年4月20号Vite 官方团队公布 Vite 4.3 正式发布。间隔上一次发布 Vite 4.2 版本（2023年03月16号），相隔35天。可见 Vite 研发团队成员多么给力，小编也是一路看着Vite 小不点，一步一步茁壮成长的，发展到现在真心不轻易。 Vite 做到可以跟 react 老大哥扳手腕了。具体请见这篇：React团队建议：Create React App 替换成 Vite。该文章当时在react 社区轰动圈内人士。Vite 现在的成就和地位，那当然也离不开 Vite 研发团队每一位成员都付出，另外也离不开尤雨溪的全方位指导。

在这个Vite 4.3 版本中，Vite 团队专注于改进 devServer 的机能。简化了解析逻辑，优化了热路径，并对查找 package.json、TS 配置文件和一般解析 URL 实现了更智能的缓存。与 Vite 4.2 比拟，速度得到了全面晋升！

而且在当时 Best of JS正式宣布前端构建工具中排名榜首。

全文大纲

Vite 先容Vite 4.3 机能测试概述Vite 4.3 测试结果Vite 4.3 机能晋升总结为什么 Vite 4.3 这么快？下一步计划

Vite 先容

官网：https://vitejs.dev/

Github：https://github.com/vitejs/vite

借用官方的原话：vite是下一代前端开发与构建工具。是一种新型前端构建工具，能够明显晋升前端开发体验。它主要由两部门组成：

dev server：利用浏览器的ESM能力来提供源文件，具有丰硕的内置功能并具有高效的HMR出产构建：出产环境利用Rollup来构建代码，提供指令用来优化构建过程

Vite作为一个基于浏览器原生ESM的构建工具，它省略了开发环境的打包过程，利用浏览器去解析imports，在服务端按需编译返回。同时，在开发环境拥有速度快到惊人的模块热更新，且热更新的速度不会跟着模块增多而变慢。因此，使用Vite进行开发，至少会比Webpack快10倍左右。

Vite的主要特性

Instant Server Start —— 即时服务启动Lightning Fast HMR —— 闪电般快速的热更新Rich Features —— 丰硕的功能Optimized Build —— 经由优化的构建Universal Plugin Interface —— 通用的Plugin接口Fully Typed APIs —— 类型齐全的API

如下图：

Vite 4.3 机能测试概述

最近，Vite 团队核心成员“翠”在社交平台表示，他在 Windows 机器上对 Vite 4.3 进行了基准测试，其初始加载速度有了大幅晋升！其中，Vite 4.3 的冷启动时间快了 3 倍，热启动时间也快了 1.3 倍。另外，在使用 SWC 插件时，Vite 4.3 的冷启动时间比 turbopack 快 1.5 秒。

在开始之前，先来先容三个相关概念：

启动时间：从“执行命令”到“在浏览器中触发 load 事件”的时间。根 HMR 时间：从“根文件被更改”到“该文件在浏览器中执行”的时间。叶子 HMR 时间：从“叶子文件被改变”到“该文件在浏览器中执行”的时间。

接下来就看看 Vite 4.3 相较于上一个版本在速度上都有哪些晋升！

测试概述

终极得到的结论如下：

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 测试结果

对 Vite 4.3 和 Vite 4.2.1 的启动时间分别进行测试：

Vite 4.2.1 + plugin-react 3.1.0 / plugin-react-swc 3.2.0