构建工具知多少（四）：Vite的优缺点

提到 Vite，给人的第一印象就是 dev server 启动速度快。同样规模的项目，相比 Webpack 动辄十几秒甚至几十秒的的启动速度，Vite 简直是快到没朋友，往往数秒之内即可完成启动(PS：网络差一点可能还需要一点时间下载依赖包)。

然而，在实际使用过程中，也有人反馈 Vite 慢得不行。有人怀疑是 Vite 本身的问题，还有人怀疑是项目代码的问题，众说纷纭。

那么，Vite 到底快不快？为什么有人说快，有人却说慢？

Vite 快的原因

• 采用模块联邦的思想，按需加载模块。 传统的前端构建工具，如 Webpack，会将整个应用程序打包成一个或多个文件。这会导致应用程序的体积变大，加载速度变慢。Vite 则采用模块联邦的思想，将应用程序分割成更小的模块，并按需加载它们。这使得应用程序的体积更小，加载速度更快。
• 使用原生 ESM 加载模块。 Webpack 需要将 CommonJS 模块转换成 ES 模块才能加载。这个转换过程会消耗时间。Vite 则直接使用原生 ESM 加载模块，无需转换，因此加载速度更快。
• 使用 Rollup 作为打包工具。 Rollup 是一款高性能的 JavaScript 打包工具。Vite 使用 Rollup 作为打包工具，可以充分发挥 Rollup 的性能优势，从而提高打包速度。

Vite 慢的原因

• 项目代码量大。 Vite 的启动速度与项目代码量成正比。项目代码量越大，Vite 启动速度越慢。
• 项目依赖过多。 Vite 需要加载项目的所有依赖包。依赖包越多，Vite 启动速度越慢。
• 网络环境差。 Vite 需要从网络上下载依赖包。网络环境差会导致下载速度慢，从而影响 Vite 的启动速度。
• Vite 版本过低。 Vite 的早期版本存在一些性能问题。更新到最新版本的 Vite 可以提高启动速度。

如何提高 Vite 的启动速度

• 减少项目代码量。 尽量减少项目中不必要的代码。
• 减少项目依赖。 尽量减少项目中不必要的依赖包。
• 优化网络环境。 使用更快的网络连接。
• 升级 Vite 版本。 更新到最新版本的 Vite。
• 使用 Vite 插件。 有些 Vite 插件可以提高 Vite 的启动速度。

总结

Vite 是一款速度很快的前端构建工具。它采用模块联邦的思想，按需加载模块，使用原生 ESM 加载模块，并使用 Rollup 作为打包工具。这些特性使得 Vite 的启动速度非常快。

不过，Vite 的启动速度也受项目代码量、项目依赖、网络环境和 Vite 版本的影响。如果项目代码量大、项目依赖多、网络环境差或 Vite 版本低，则 Vite 的启动速度可能会变慢。

可以通过减少项目代码量、减少项目依赖、优化网络环境、升级 Vite 版本和使用 Vite 插件等方式来提高 Vite 的启动速度。