Umi 4 中使用 Module Federation v2 的技术实践

Module Federation 是 Webpack 5 提供的一项重要功能，它允许在多个独立构建的应用间共享代码和资源。随着 Module Federation v2 的发布，开发者可以获得更强大的模块共享能力。本文将详细介绍在 Umi 4 框架中集成 Module Federation v2 的技术实践。

背景与挑战

Umi 4 作为企业级前端应用框架，默认预打包了 Webpack 等核心依赖。这种设计虽然提高了构建效率，但在集成 Module Federation v2 时却遇到了两个主要技术障碍：

1. 依赖冲突问题：Umi 4 内置的 Webpack 与 Module Federation v2 插件内部引用的 Webpack 版本存在冲突
2. 模块暴露问题：即使解决了依赖冲突，暴露的模块在构建后仍可能无法正确加载

解决方案

解决依赖冲突

通过修改 Umi 4 的构建流程，允许使用外部 Webpack 而非内置版本。具体实现方式包括：

1. 修改 @umijs/bundler-webpack 的源码，注释掉 requireHook 的引入
2. 在项目中显式安装所需版本的 Webpack 依赖

配置 Module Federation

在 .umirc.ts 配置文件中，通过 chainWebpack 方法添加 Module Federation 插件：

import { ModuleFederationPlugin } from "@module-federation/enhanced/webpack";

export default defineConfig({
  chainWebpack(memo) {
    memo.plugin("module-federation").use(ModuleFederationPlugin, [
      {
        name: "host",
        filename: "remote.js",
        exposes: {
          "./Button": "./src/exposes/Button/index",
        },
        shared: {
          react: { singleton: true, eager: true },
          "react-dom": { singleton: true, eager: true },
        },
      },
    ]);
  },
});

开发环境热更新

在开发环境中，需要特别配置 React Refresh 插件以确保热更新正常工作：

new ReactRefreshWebpackPlugin({
  library: 'your-package-name',
}),

或者通过设置 output.uniqueName 属性来实现相同的效果。

最佳实践

1. 构建配置：

   • 禁用 MFSU（mfsu: false）
   • 使用 Terser 而非 ESBuild 作为压缩工具（jsMinifier: 'terser'）
   • 构建时可通过 COMPRESS=none 环境变量禁用压缩以方便调试

2. 项目结构：

   • 将需要暴露的模块统一放置在 src/exposes 目录下
   • 为共享模块配置适当的版本控制和加载策略

3. 调试技巧：

   • 使用 console.log 输出 Module Federation 的加载信息
   • 通过 Chrome DevTools 检查网络请求和加载的模块

注意事项

1. 目前 Umi 官方不再提供内置的 Module Federation v2 插件支持，开发者需要自行实现集成方案
2. 在生产环境部署前，务必进行全面测试，确保模块加载和共享的正确性
3. 注意处理不同环境下（开发、测试、生产）的配置差异

通过以上技术方案，开发者可以在 Umi 4 项目中成功集成 Module Federation v2，实现微前端架构下的模块共享能力。虽然过程需要一些手动配置，但获得的灵活性和扩展性值得投入。