最近在开发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 ,项目就成功启动了。