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 ，項目就成功啟動了。