🚀 Vite4.3 来袭，性能提升 10x！冷启动时间比turbopack还快！

序言

最近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的冷启动时间现在比turbopack快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-plugin-warmup

vite团队成员开发。是一个vite文件预热插件，可以尽早的开始处理一些我们必须加载的vite文件。

Vite 的核心是一个按需文件服务器。当收到请求时，它将转换文件并提供服务。这意味着我们只做请求的工作，保持开发服务器的快速运行。

但是，有时我们会提前知道在开始开发周期时会请求哪些文件。我们可以提前开始转换文件，而不是在打开页面之前让 Vite 处于空闲状态，这样当它被请求时，它就会被缓存并可以立即提供。

现在该插件依赖vite4.3的一些新特性：

warmup可以在server init上启动而不是server listen
直接对 HTML 文件进行预热
同时推动用户升级到4.3

用起来也相当简单。

// vite.config.js
import { defineConfig } from 'vite'
import { warmup } from 'vite-plugin-warmup'

export default defineConfig({
  plugins: [
    warmup({
      // warm up the files and its imported JS modules recursively
      clientFiles: ['./**/*.html', './src/components/*.jsx']
    })
  ]
})

结语

前段时间，Vercel 推出了下一代打包工具：Turbopack，并宣称其比 Vite 快 10 倍。（此处未被证实）
但是如今，Vite 在某些方面已经超越了 Turbopack。
还有根据官方的一些信息，当稳定后 vite-plugin-warmup 插件功能会进入vite核心中。大家感兴趣可以提前升级到vite4.3-beta安装此插件，体验一下。

序言