umi提速方案之 mfsu

最近在开发react项目，在npm start启动项目的时候，速度很慢，影响工作效率。并提示尝试新出的 MFSU 方案：

 

antd pro v5 项目里已经使用了MFSU案例。antd pro v4是需要我们自己配置的。

顺着所给的git地址去看了一下，并结合我的尝试给大家记录一下。

什么是 MFSU？

• 不管多大的项目，有缓存时启动 1s+，热更新平均 500ms 内
• 配置 mfsu 开启，无需修改项目代码
• 基于 webpack 的通用方案，umi 3 项目均可用
• 可用于生产，可多人协作
• beta 阶段提供手把手服务群

重点来了，我们如何使用？

1、确保我们的项目是 umi 3 项目，打开项目的package.json文件，查看下dependencies：

 

如图所示，我的项目是umi3的，可以使用。

2、修改依赖的umi 版本为 "^3.5.0"

可以直接改上图的umi，删除node_modules,重新装依赖，npm install 一下。

  "umi": "^3.5.0"

也可以直接在终端输入命令：

npm install umi@3.5 --save
// or
yarn add umi@3.5

3、在config.ts或者是config.js里修改配置

export default defineConfig({
  mfsu: {},
  webpack5: {},
  ...
});

 

 

上面的mfsu加上了，还要加上webpack5,刚开始我没加webpack5，就出现了下面的报错。

 

 

4、然后 npm start ，项目就成功启动了。