umi提速方案之 mfsu

时间:2024-04-17 08:45:55

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

umi提速方案 MFSU

 

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

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

什么是 MFSU?

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

重点来了,我们如何使用?

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

umi提速方案 MFSU

 

如图所示,我的项目是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: {},
  ...
});

 

umi提速方案 MFSU

 

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

 

umi提速方案 MFSU

 

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