題外：

抖音號(hào)：dy51fclwgkb9 關(guān)注我吧！

目前我們公司的C端項(xiàng)目使用的是 umi.js，umi 3.5以上的版本實(shí)現(xiàn)了一個(gè)新功能 mfsu，實(shí)現(xiàn)開發(fā)環(huán)境秒級(jí)熱更新。

背景

關(guān)于 mfsu 是什么，解決了什么問題，可以看 umi 3.5，讓研發(fā)重新變得美好 這篇文章。今天我這里主要是寫一下如何配置，遇到錯(cuò)誤如何解決，幸運(yùn)的是這些問題都可以在官方的 issues 中找到解決方法。

我們的項(xiàng)目說復(fù)雜其實(shí)也不復(fù)雜，就是要接很多內(nèi)部的東西，比如監(jiān)控，sentry，性能sdk，反爬sdk等，而且隨著需求越來越多， pages 里面的東西越來越大，會(huì)導(dǎo)致啟動(dòng)和熱更很慢，mfsu要解決的就是這個(gè)問題，目前我們只關(guān)注開發(fā)熱更新，生產(chǎn)環(huán)境的不要隨意去動(dòng)，畢竟部署打包時(shí)間長一點(diǎn)也無所謂的，穩(wěn)定性最重要。

對(duì)比

下面看一組數(shù)據(jù)，項(xiàng)目沒有啟用 msfu 的打包時(shí)間和熱更新時(shí)間：

• 第一次打包時(shí)間有45秒：
  

• 熱更新時(shí)間有3秒多：
  

在看一組數(shù)據(jù)，配置了mfsu 的打包和熱更時(shí)間：

• 第一次打包時(shí)間有25秒：
  

  image.png

• 熱更新時(shí)間平均500毫秒：
  

  
  兩組數(shù)據(jù)對(duì)比，無論是打包時(shí)間和熱更新時(shí)間都提升了 50%，實(shí)實(shí)在在的提升了開發(fā)體驗(yàn)。所以官方出的 msfu 方案還是很好的，我們項(xiàng)目目前使用的版本是 3.5.20，大家都可以嘗試將 umi 升級(jí)到 3.5以上的版本，使用體驗(yàn)一下。

配置

mfsu 的配置很簡單，麻煩的是不同的項(xiàng)目，可能在啟動(dòng)的時(shí)候報(bào)的錯(cuò)千奇百怪，這就需要去搜索，找到解決問題的方案，最好的方式還是去 github 的 issues 里面看看是否有別人遇到同樣的問題，嘗試一下別人的方案是否可行。

使用 mfsu ，首先需要確保 umi 的版本一定要高于3.5.0版本，然后在 .umirc.ts 配置文件中新增如下配置，需要注意的是在開發(fā)環(huán)境中不要配置splitChunks，至于原因，官方?jīng)]說，我也不知道m(xù)mmm。

.umirc.ts 配置如下：

const config = {
  chainWebpack: (config) => {
// 生產(chǎn)環(huán)境才分包
    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 目錄重新啟動(dòng) umi dev。

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