题外：
抖音号：dy51fclwgkb9 关注我吧！
目前我们公司的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
