加速前端开发：用MFSU瞬间解决本地热更新慢的烦恼！

大家好，我是前端大骆，又来分享一些工作中遇到的挑战，如果我的经验对您有所帮助，请点个赞收个藏支持一下，关注我不迷路。

解决前端工程启动缓慢的问题

最近接手了一个项目，发现前端工程启动速度非常慢，每次启动都需要耗费大约5分钟的时间，而热更新则需要30秒至1分钟不等。即便使用了i9-12900H处理器和32GB内存的笔记本，仍然无法解决这个问题，更不用说团队其他成员配置更低的电脑了。这种情况严重影响了我们的开发效率，必须得进行优化才行，不然得天天加班赶进度，都没时间写文章了。

通过启用MFSU优化构建速度

前端工程是使用UmiJS4搭建的，经过查看UmiJS4的配置文档，发现可以通过配置mfsu来加快本地构建速度。

开启mfsu，在工程中config/config.ts或.umirc.ts做如下配置：

import { defineConfig } from '@umijs/max';
export default defineConfig({
    mfsu: {},
});

重新构建后，构建时间缩短至1分钟左右，热更新时间也降至十几秒，提速效果显著。

解决修改后的代码不生效问题

然而，好景不长，组员反馈说，我更新了组件库的代码，但是更改没有生效。

我们的工程采用了 monorepo 风格，主工程通过 npm 包形式引用了子工程的代码。在我修改了子工程的代码后，构建成功了，并且我确认构建产物中包含了修改后的代码。然而，在主工程中更改并未生效。或许是 MFSU 功能存在问题，不应该啊。

我重新查阅了UmiJS4的配置文档，发现了关于 MFSU 的介绍。MFSU 是基于 Module Federation 的提速功能。接下来我将详细解释这句话的含义。

Module Federation（模块联邦）是 Webpack 5 中引入的功能，用于解决前端微服务架构中的模块共享和远程加载问题。通过 Module Federation，不同的应用程序可以共享彼此的代码和模块，实现模块的动态共享和加载，构建出更灵活和高效的系统架构。

也就是说，MFSU 利用 Module Federation 的特性，通过模块共享、缓存优化和动态系统架构等方式，加快了构建速度，减少了重复构建的时间和文件大小。简而言之，启用 MFSU 后，如果一个模块在之前的构建中已经存在，UmiJS4 将直接使用之前缓存的结果，而不会重新构建，从而节省时间。

主工程在启动后缓存了引用组件库子工程的构建产物的模块。因此，无论组件库子工程的代码如何修改，主工程仍然使用缓存中的旧模块，导致更改未生效。

既然这样，可否让组件库子工程的构建产物不被 MFSU 处理，应该就可以解决这个问题。

文档中提到，使用 mfsu.exclude 可以排除某个依赖的构建产物不被 MFSU 处理，其用法如下所示：

exclude 手动排除某些不需要被 MFSU 处理的依赖, 字符串或者正则的形式，比如 vant 不希望走 MFSU 处理，可以配置 { exclude: [ 'vant' ] } 匹配逻辑为全词匹配，也可以配置 { exclude: [ /vant/ ] } 只要 import 路径中匹配该正则的依赖都不走 MFSU 处理

在工程的 config/config.ts 或 .umirc.ts 文件中进行如下配置修改：

import { defineConfig } from '@umijs/max';
export default defineConfig({
   mfsu: {
    exclude: [/@lhdfeng\/wform/]
   },
});

在主工程中，组件库的组件是通过 import { xxx } from '@lhdfeng/wform' 引入的，因此使用正则表达式/@lhdfeng\/wform/来配置引入路径。

通过以上配置，主工程将排除@lhdfeng/wform组件库的构建产物，确保它不被MFSU处理。重新监听组件库子工程，再重新启动主工程，修改组件库子工程中的代码，更改很快就在主工程中生效了，问题得以解决。

希望这些经验对大家有所帮助，一起优化前端工程，提高开发效率！