UMI中 mfsu的作用以及用法

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；优快云知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

No.	内容链接
1	Openlayers 【入门教程】 - 【源代码+示例300+】
2	Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3	Cesium 【入门教程】 - 【源代码+图文示例200+】
4	MapboxGL【入门教程】 - 【源代码+图文示例150+】
5	前端就业宝典 【面试题+详细答案 1000+】

---

mfsu是umi正式3.5版本发布后，此次更新带来了一个全新的功能。他是一种基于webpack5新特性Module Federation（模块联邦）的打包提速方案。开启mfsu可以大幅减少启动项目和热更新所需的时间。在生产模式，也可以通过提前编译依赖，大幅提升部署效率。

一、基本使用

开发阶段

初始化一个 umi 应用。
在 config.ts 中添加 mfsu:{}。
umi dev 启动项目。在构建依赖时，会出现 MFSU 的进度条，此时应用可能会被挂起或显示依赖不存在，请稍等。
多人合作时，可以配置 mfsu.development.output 配置预编译依赖输出目录并添加到 git 中，在其他开发者启动时，就可以免去再次编译依赖的过程。

特性

预编译：默认情况下，预编译将会将依赖构建到 ~/.umi/.cache/.mfsu 下。并且使用了 webpack 缓存，减少再次编译依赖的时间。
diff：预编译时，会将本次的依赖信息构建到 ~/.mfsu/MFSU_CACHE.json 中，用于依赖的 diff。
持久化缓存：对于预编译依赖的请求，开启了cache-control: max-age=31536000,immutable，减少浏览器刷新拉取依赖的时间。

构建阶段

warning: 由于预编译依赖实现了部分的 tree-shaking，不建议在打包大小敏感的项目中启用生产模式。

配置 config.ts：mfsu.production = {}以开启生产模式。
执行命令：umi build，默认情况下将会将生产依赖预编译到 ~/.mfsu-production 中。

umi 会将依赖外的产物构建到 ~/dist 中，mfsu 再将生产预编译依赖移动到输出目录中。
使用 mfsu 生产模式，可以将 ~/.mfsu-production 添加到 git 中。在部署时，仅编译应用文件，速度快到飞起。

二、在 antd-pro 中使用

mfsu 已经完美支持 antd-pro 和 dumi，在默认的 antd-pro 中启用 mfsu，和在其他项目中使用一样简单：

mfsu: {},