Webpack 模块联邦（Module Federation）详解

什么是模块联邦？

模块联邦（Module Federation）是 Webpack 5 引入的一项革命性功能，它允许你在运行时动态地从其他独立构建的应用中加载模块。这项技术打破了传统的微前端架构限制，实现了真正的代码共享和应用间通信。

使用场景

1. 微前端架构

多团队独立开发：不同团队可以独立开发、部署自己的应用模块
技术栈隔离：各个微应用可以使用不同的技术栈
独立部署：每个微应用可以独立部署，互不影响

2. 大型企业应用

业务模块解耦：将大型应用拆分为多个业务模块
团队协作：不同业务线团队可以并行开发
资源共享：公共组件和库可以在多个应用间共享

3. 组件库共享

跨项目组件复用：将通用组件库在多个项目间共享
版本管理：统一管理共享组件的版本
减少重复开发：避免在多个项目中重复开发相同功能

4. 渐进式迁移

应用重构：逐步将老旧应用迁移到新架构
技术栈升级：逐步替换旧技术栈
风险控制：降低一次性重构的风险

5. 多租户应用

定制化需求：为不同客户提供定制化功能模块
核心功能共享：共享核心功能，扩展特定功能
灵活组合：根据客户需求灵活组合功能模块

6. A/B测试和功能切换

功能版本管理：同时维护多个功能版本
动态切换：根据用户或环境动态切换功能模块
灰度发布：逐步向用户推送新功能

核心概念

1. Host（主机应用）

消费其他远程模块的应用，也称为主应用或容器应用。

2. Remote（远程应用）

提供模块给其他应用使用的应用，也称为远程应用或被依赖应用。

3. Shared（共享模块）

多个应用之间共享的依赖模块，避免重复加载。

基本配置

webpack.config.js 配置示例

const { ModuleFederationPlugin } = require("@webpack-cli/module-federation");

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: "app_one",
      filename: "remoteEntry.js",
      exposes: {
        "./Button": "./src/Button",
        "./Component": "./src/Component"
      },
      remotes: {
        app_two: "app_two@http://localhost:3002/remoteEntry.js"
      },
      shared: {
        react: { singleton: true, requiredVersion: "^17.0.0" },
        "react-dom": { singleton: true, requiredVersion: "^17.0.0" }
      }
    })
  ]
};

配置参数详解

name（必需）

类型：string
作用：定义当前应用的唯一标识符
示例：name: "myApp"

filename（可选）

类型：string
作用：指定远程入口文件的名称
默认值："remoteEntry.js"
示例：filename: "myRemoteEntry.js"

exposes（可选）

类型：object
作用：声明当前应用对外暴露的模块
格式：{ 暴露名称: 本地路径 }
示例：

exposes: {
  "./Button": "./src/components/Button",
  "./utils": "./src/utils/index"
}

remotes（可选）

类型：object
作用：声明当前应用依赖的远程应用
格式：{ 别名: 远程应用名称@远程入口URL }
示例：

remotes: {
  app_two: "app_two@http://localhost:3002/remoteEntry.js",
  shared_lib: "shared_lib@https://cdn.example.com/sharedLib.js"
}

shared（可选）

类型：object 或 array
作用：声明需要在应用间共享的依赖
配置选项：
- singleton: 是否为单例模式（只加载一个版本）
- requiredVersion: 所需版本号
- eager: 是否立即加载（不推荐）
- import: 自定义导入方式
示例：

shared: {
  react: { 
    singleton: true, 
    requiredVersion: "^17.0.0" 
  },
  "react-dom": { 
    singleton: true, 
    requiredVersion: "^17.0.0" 
  }
}

实际应用示例

Host 应用配置

// host/webpack.config.js
new ModuleFederationPlugin({
  name: "host",
  remotes: {
    remote: "remote@http://localhost:3001/remoteEntry.js"
  },
  shared: {
    react: { singleton: true },
    "react-dom": { singleton: true }
  }
});

Remote 应用配置

// remote/webpack.config.js
new ModuleFederationPlugin({
  name: "remote",
  filename: "remoteEntry.js",
  exposes: {
    "./Button": "./src/Button",
    "./Header": "./src/Header"
  },
  shared: {
    react: { singleton: true },
    "react-dom": { singleton: true }
  }
});

在 Host 应用中使用 Remote 模块两种方式

直接import动态加载模块，使用Webpack中ModuleFederationPlugin模块管理

// 动态导入远程模块
const RemoteButton = React.lazy(() => import("remote/Button"));

function App() {
  return (
    <div>
      <h1>Host Application</h1>
      <React.Suspense fallback="Loading Button">
        <RemoteButton />
      </React.Suspense>
    </div>
  );
}

手动加载进行管理

   /**
   * remoteUrl: 远程模块的 URL
   * scope: 模块的作用域
   * module: 模块名称
   */  
    const elementId = `federated-script-${scope}`

    // 创建注入
    const script = document.createElement('script')
    script.id = elementId
    script.src = remoteUrl
    script.type = 'text/javascript'
    script.async = true

    script.onload = () => {
      console.log(`动态加载脚本成功: ${remoteUrl}`)
      loadModule()
    }

    script.onerror = (error) => {
      console.error(`动态加载脚本失败: ${remoteUrl}`, error)
      setState({ module: null, ready: false, failed: true, error: '脚本加载失败' })
    }

    document.head.appendChild(script)

加载后模块将自动挂载window对象下，可使用window[scope].get(module)获取，亦可判断模块是否已经加载过了

高级特性

1. 版本兼容性控制

通过 requiredVersion 和 singleton 配置确保依赖版本一致性：

shared: {
  react: { 
    singleton: true, 
    requiredVersion: "^17.0.0",
    strictVersion: true
  }
}

2. 异步共享模块

shared: {
  lodash: {
    import: false, // 不立即导入
    requiredVersion: "^4.17.0"
  }
}

3. 自定义共享策略

shared: {
  "my-library": {
    singleton: true,
    version: "1.2.3",
    shareScope: "default"
  }
}

最佳实践

1. 共享依赖管理

将常用第三方库设置为共享模块
使用 singleton: true 确保单例
明确指定 requiredVersion

2. 模块暴露策略

只暴露必要的模块
使用清晰的命名规范
避免暴露过于具体的实现细节

3. 错误处理

// 添加错误边界处理远程模块加载失败
const RemoteComponent = React.lazy(() => 
  import("remote/Component").catch(() => import("./FallbackComponent"))
);

4. 性能优化

合理配置共享模块避免重复加载
使用代码分割减少初始加载体积
考虑使用 CDN 加速远程入口文件加载

常见问题与解决方案

1. 依赖版本冲突

问题：不同应用使用不同版本的同一依赖导致冲突 解决方案：使用 singleton: true 和明确的 requiredVersion

2. 模块加载失败

问题：远程模块无法正确加载 解决方案：

检查网络连接和 URL 配置
确保远程应用正常运行
添加错误处理机制

3. 构建性能问题

问题：启用模块联邦后构建时间变长 解决方案：

优化共享模块配置
避免过度暴露模块
使用缓存策略

总结

模块联邦为现代前端应用提供了强大的微前端架构支持，通过合理的配置可以实现应用间的无缝集成和代码共享。关键在于：

理解核心概念和配置参数
合理规划模块暴露和共享策略
注意版本兼容性和错误处理
遵循最佳实践以确保性能和稳定性

通过模块联邦，开发者可以构建更加灵活、可维护的大型前端应用架构。

详解Webpack中模块联邦