Vite 4.3 性能大幅提升！
2022-08-29 23:24:46
Vite 4.3 性能大幅提升，冷启动时间快了3倍，热启动时间快了1.3倍
近日，Vite 团队在社交平台公布了 Vite 4.3 版本在性能上的显著提升。据 Vite 团队核心成员“翠”在 Windows 机器上进行的基准测试显示，Vite 4.3 的冷启动时间快了3倍，热启动时间也快了1.3倍。在使用 SWC 插件时，Vite 4.3 的冷启动时间甚至比 turbopack 快1.5秒。以下是对 Vite 4.3 性能提升的详细分析：
一、相关概念介绍- 启动时间：从“执行命令”到“在浏览器中触发 load 事件”的时间。
- 根 HMR 时间：从“根文件被更改”到“该文件在浏览器中执行”的时间。
- 叶子 HMR 时间：从“叶子文件被改变”到“该文件在浏览器中执行”的时间。
Vite 4.3 与其他构建工具（如 Farm、Webpack、Rspack 和 Turbopack）进行了对比测试，使用 Turbopack 的基准案例（1000 个 React 组件）作为参考。测试结果显示：
- Vite(plugin-react) 的启动时迅启间只比 turbopack 慢 0.2s（冷启动），但快 0.2s（热启动）。
- 使用 SWC 插件时，Vite(plugin-react-swc) 的启动时间比 turbopack 快 1.5s（冷启动）和 1.8s（热启动）。
- Vite 的叶子 HMR 时间比 turbopack 快，但根 HMR 时间比 turbopack 慢 5-10ms。
- Rspack 的启动时间是 Vite 的一半，但 HMR 的启动时间是 Vite 的 10 倍。
启动时间：
Vite 4.3 beta.2 与 Vite 4.2.1 相比，plugin-react 的启动时间提升了 3.5 倍（冷启动）和 1.3 倍（热启动）。
使用 SWC 插件时，启动时间提升了 4.4 倍（冷启动）和 1.6 倍（热启动）。
热更新时间：
Vite 4.3 beta.2 的 plugin-react 热更宏昌腔蔽衫新时间提升了 1.7 倍（根 HMR）和 2.3 倍（叶子 HMR）。
使用 SWC 插件时，热更新时间提升了 1.3 倍（根 HMR）和 1.7 倍（叶子 HMR）。
将 Vite 4.3 beta.2 与其他构建工具进行对比，结果显示：
- 在启动时间方面，Vite 4.3 beta.2 的表现优于 Webpack 和 Rspack，与 Turbopack 相差无几，甚至在某些情况下更快。
- 在热更新时间方面，Vite 4.3 beta.2 也表现出色，优于其他构建工具。
- Vite 4.2.1 + plugin-react 3.1.0 的 FCP 平均值为 38031。
- Vite 4.3.0-beta.2 + plugin-react 4.0.0-beta.0 的 FCP 平均值为 3083，比 Vite 4.2.1 快了 12 倍。
Vite 4.3 在性能上取得了显著提升，特别是在启动时间和热更新时间方面。这一进步使得 Vite 在与其他构建工具的竞争中更具优势。未来，随着技术的不断发展和优化，期待 Vite 能够继续提升性能，为用户提供更好的开发体验。
以下是部分测试结果的图片展示：
热门标签
