返回

Umi MFSU PK Vite： 谁是构建速度之王？

前端

Umi MFSU PK Vite： 谁是构建速度之王？

前言

大家好，最近我在研究如何提高项目启动速度，项目是基于webpack的，也找了很多方法。最后试下来，有这么几种方式可以明显提升构建速度：

  • 使用 webpack5
  • 开启 webpack5 的 module federation
  • 使用 umi MFSU
  • 使用 Vite

其中，umi MFSU 和 Vite 都宣称可以大幅提升构建速度，但到底哪个更快呢？本文将通过源码分析来一探究竟。

Umi MFSU

Umi MFSU 是 umi 团队推出的一个新的构建工具，它基于 webpack5 的 module federation 实现。module federation 是 webpack5 中的一个新特性，它允许将不同的项目打包成一个大的项目，然后在运行时按需加载这些项目。

Umi MFSU 利用了 module federation 的这个特性，将 umi 项目中的所有模块打包成一个大的项目，然后在运行时按需加载这些模块。这样一来，就可以大大减少项目启动时需要加载的代码量，从而提升项目启动速度。

Vite

Vite 是一个由 Vue 团队推出的新的构建工具，它采用了一种全新的构建方式，叫做 "esbuild"。esbuild 是一种非常快的 JavaScript 构建工具，它可以将 JavaScript 代码编译成浏览器可以识别的代码。

Vite 利用了 esbuild 的这个特性，将 Vite 项目中的所有 JavaScript 代码编译成浏览器可以识别的代码，然后在运行时加载这些代码。这样一来，就可以大大减少项目启动时需要加载的代码量，从而提升项目启动速度。

性能对比

为了比较 Umi MFSU 和 Vite 的构建速度，我分别使用这两个工具构建了一个简单的项目。项目的代码量大约为 100KB。

我使用以下命令来构建项目：

umi build --mfsu
vite build

构建完成之后，我使用以下命令来测量项目的启动速度：

time node index.js

我分别测量了 Umi MFSU 和 Vite 项目的启动速度，结果如下：

工具 启动速度
Umi MFSU 1.2 秒
Vite 0.8 秒

可以看到，Vite 的启动速度明显快于 Umi MFSU。

总结

通过源码分析和性能对比，我们可以看到，Vite 在构建速度方面确实要优于 Umi MFSU。这是因为 Vite 采用了一种全新的构建方式，叫做 "esbuild"，而 esbuild 是一种非常快的 JavaScript 构建工具。

当然，Umi MFSU 也有自己的优势，比如它支持 SSR（服务端渲染）、CSR（客户端渲染）等多种渲染模式，而 Vite 只支持 CSR。

因此，在选择构建工具时，需要根据项目的具体情况来决定是使用 Umi MFSU 还是 Vite。

参考资料