Module Federation模块联邦原理与实践

Module Federation核心概念

Module Federation允许多个独立构建的应用在运行时共享模块：

• Host：消费方应用，运行时加载远程模块
• Remote：提供方应用，暴露模块供其他应用使用

配置示例

Remote暴露模块（提供方）：

// webpack.config.js
new ModuleFederationPlugin({
  name: 'app1',
  filename: 'remoteEntry.js',  // 入口文件名
  exposes: {
    './Header': './src/components/Header',
    './Button': './src/components/Button'
  },
  shared: { react: { singleton: true }, 'react-dom': { singleton: true } }
})

Host加载模块（消费方）：

new ModuleFederationPlugin({
  name: 'host',
  remotes: {
    app1: 'app1@http://localhost:3001/remoteEntry.js'
  },
  shared: { react: { singleton: true }, 'react-dom': { singleton: true } }
})

组件中使用：

const Header = React.lazy(() => import('app1/Header'));

工作原理：

1. Host加载Remotes的remoteEntry.js（运行时代码）
2. remoteEntry.js包含模块映射表和加载器
3. 加载远程模块时，通过JSONP动态请求该模块的chunk
4. 共享依赖（shared）确保React等核心库不重复加载

与qiankun对比

特性	Module Federation	qiankun
运行时隔离	沙箱+shared作用域	JS沙箱+样式隔离
依赖管理	共享依赖、版本控制	独立打包、依赖隔离
通信方式	shared store或bridge	props通信（init）
构建集成	Webpack原生	框架无关、构建独立
加载粒度	单个模块（组件级）	整个应用（路由级）
版本协调	编译时指定版本	运行时协商

核心差异：

• MF是构建时联邦（编译时确定remote），qiankun是运行时加载
• MF共享更细粒度（组件级别），qiankun是应用级别
• MF天然处理依赖共享（shared），qiankun依赖独立构建
• MF更适合同一技术栈内的模块共享，qiankun适合异构微前端

最佳实践：

• 使用shared配置确保React/Vue等不重复加载
• 通过singleton: true共享单例
• 结合import() + lazy优化按需加载
• 配置优雅降级策略（remote不可用时fallback）