umi 配置 msfu-实现秒启动

目前我们公司的C端项目使用的是 umi.js，umi 3.5以上的版本实现了一个新功能 mfsu，实现开发环境秒级热更新。

背景

关于 mfsu 是什么，解决了什么问题，可以看 umi 3.5，让研发重新变得美好 这篇文章。今天我这里主要是写一下如何配置，遇到错误如何解决，幸运的是这些问题都可以在官方的 issues 中找到解决方法。

我们的项目说复杂其实也不复杂，就是要接很多内部的东西，比如监控，sentry，性能sdk，反爬sdk等，而且随着需求越来越多， pages 里面的东西越来越大，会导致启动和热更很慢，mfsu要解决的就是这个问题，目前我们只关注开发热更新，生产环境的不要随意去动，毕竟部署打包时间长一点也无所谓的，稳定性最重要。

对比

下面看一组数据，项目没有启用 msfu 的打包时间和热更新时间：

• 第一次打包时间有45秒：
  

  

• 热更新时间有3秒多：
  

  

在看一组数据，配置了mfsu 的打包和热更时间：

• 第一次打包时间有25秒：
  

  image.png

• 热更新时间平均500毫秒：
  

  
  两组数据对比，无论是打包时间和热更新时间都提升了 50%，实实在在的提升了开发体验。所以官方出的 msfu 方案还是很好的，我们项目目前使用的版本是 3.5.20，大家都可以尝试将 umi 升级到 3.5以上的版本，使用体验一下。

配置

mfsu 的配置很简单，麻烦的是不同的项目，可能在启动的时候报的错千奇百怪，这就需要去搜索，找到解决问题的方案，最好的方式还是去 github 的 issues 里面看看是否有别人遇到同样的问题，尝试一下别人的方案是否可行。

使用 mfsu ，首先需要确保 umi 的版本一定要高于3.5.0版本，然后在 .umirc.ts 配置文件中新增如下配置，需要注意的是在开发环境中不要配置splitChunks，至于原因，官方没说，我也不知道mmmm。

.umirc.ts 配置如下：

const config = {
  chainWebpack: (config) => {
// 生产环境才分包
    if (BUILD_ENV === 'production') {
      config.merge({
        optimization: {
          splitChunks: {
            chunks: 'all',
            minSize: 30000,
            minChunks: 3,
            automaticNameDelimiter: '.',
            cacheGroups: {
              vendor: {
                name: 'vendors',
                test({ resource }) {
                  return /[\\/]node_modules[\\/]/.test(resource);
                },
                priority: 10,
              },
            },
          },
        },
      });
    }
  }
  mfsu : {},
  webpack5: {},
}

配置完之后，删除 src/.umi 目录重新启动 umi dev。

参考：https://github.com/umijs/umi/issues/7042
https://zhuanlan.zhihu.com/p/385272270