UmiJS中的MFSU加速方案深度解析

UmiJS中的MFSU加速方案深度解析

umi A framework in react community ✨ 项目地址: https://gitcode.com/gh_mirrors/um/umi

什么是MFSU

MFSU（Module Federation Speed Up）是Umi框架基于Webpack5模块联邦特性实现的一种依赖加速解决方案。其核心思想是通过"分而治之"的策略，将应用源代码和应用依赖项分开编译，将变更频率较低的应用依赖项构建为模块联邦的远程应用，从而避免在应用热更新时重复编译依赖项。

开启MFSU后能显著减少热更新所需时间，因此在Umi项目中默认启用了MFSU功能。当然，你也可以通过配置mfsu: false来禁用它。

MFSU的工作原理

传统编译流程的问题

在传统前端项目中，每次代码变更都会触发完整的重新编译过程，包括：

1. 应用源代码编译
2. 所有依赖项的重新处理
3. 最终打包

这种模式下，即使只是修改了一行业务代码，也需要重新处理所有依赖项，造成了大量不必要的计算开销。

MFSU的创新之处

MFSU通过Webpack5的模块联邦特性，将依赖项构建为独立的远程模块，实现了：

• 依赖项与业务代码分离编译
• 依赖项变更时才重新构建
• 开发环境下通过模块联邦按需加载

这种架构使得在开发过程中，90%以上的热更新只需要重新编译业务代码，大幅提升了开发体验。

MFSU的两种策略

1. 编译时分析策略（Normal策略）

配置方式：

mfsu: {
  strategy: 'normal',
}

工作流程：

1. 先单独编译应用项目源代码
2. 通过编译插件收集项目依赖
3. 根据收集结果构建依赖部分代码

特点：

• 依赖分析准确完整
• 构建过程是串行的
• 适合依赖关系复杂的项目

2. 扫描分析策略（Eager策略）

配置方式：

mfsu: {
  strategy: 'eager',
}

工作流程：

1. 静态扫描所有源代码文件
2. 快速分析出项目依赖
3. 并行编译项目代码和依赖

特点：

• 分析速度快（1700行代码约700ms）
• 构建过程并行化
• 可能遗漏编译时插入的依赖

构建工具选择

MFSU支持两种构建工具：

1. Webpack（默认）

   • 兼容性好
   • 支持完整Webpack生态
   • 构建速度中等

2. esbuild

   • 启用方式：mfsu: { esbuild: true }
   • 构建速度极快
   • 可能在某些场景下存在兼容性问题

策略选择指南

| 场景 | 推荐策略 | 理由 | |------|---------|------| | 不使用模块联邦且依赖稳定 | esbuild | 最大化构建速度 | | Monorepo项目 | Normal | 依赖关系复杂，需要准确分析 | | 大型代码库 | Eager | 并行构建优势明显 | | 新项目/频繁变更依赖 | Eager | 快速迭代需求 | | 常规项目 | 按需选择 | 两者差异不大 |

常见问题解决方案

1. 依赖缺失错误

error - [MFSU][eager] build worker failed AssertionError [ERR_ASSERTION]: filePath not found of lodash.capitalize

解决方法： 检查并确保对应依赖已正确安装。

2. React多实例问题

现象：运行时出现多个React实例。

解决方案：

mfsu: {
  shared: {
    react: {
      singleton: true,  // 确保单例
    },
  },
}

3. externals脚本兼容问题

现象：使用externals脚本类型时获取到的是Promise而非模块。

解决方案：

externals: {
  ...(process.env.NODE_ENV === 'production' ? {b: ['script https://cdn/b.js', b]} : {})
}

4. 循环依赖问题

场景：Monorepo中项目与子包相互引用。

解决方案：

mfsu: {
  exclude: ['依赖包名']
}

5. Worker兼容问题

原因：模块联邦通过window共享模块，Worker环境无法使用。

解决方案：将Worker所需依赖加入exclude配置。

最佳实践建议

1. 对于中小型项目，推荐优先尝试Eager策略+esbuild组合
2. 在Monorepo中，合理使用monorepoRedirect配置
3. 遇到构建问题时，先检查是否为已知兼容性问题
4. 生产环境构建时，可考虑禁用MFSU以获得更优的打包结果
5. 定期检查依赖关系，避免不必要的嵌套依赖

通过合理配置MFSU，开发者可以在Umi项目中获得接近瞬时的热更新体验，大幅提升开发效率。根据项目特点选择合适的策略和工具组合，是发挥MFSU最大效用的关键。

umi A framework in react community ✨ 项目地址: https://gitcode.com/gh_mirrors/um/umi