模块联邦通过运行时动态共享代码实现微前端，支持独立开发部署。配置中name定义应用名，remotes引入远程模块，exposes暴露本地模块，shared声明公共依赖并设singleton避免重复加载。常见模式有基座+微应用、对等协作和组件级共享。采用异步import()结合React.lazy与Suspense实现懒加载，提升性能。需管理版本兼容性，使用语义化版本控制remoteEntry地址，固定shared依赖大版本，上线前做契约测试。合理设计共享边界和通信机制是维护关键。
微前端架构让多个团队能独立开发、部署前端应用，而模块联邦（Module Federation）是 Webpack 5 提出的一种革命性方案，直接在运行时动态共享代码，无需打包成传统库。它打破了应用间的壁垒，实现真正的按需加载与跨应用复用。
模块联邦核心机制
模块联邦通过 Webpack 配置暴露和消费远程模块，本质是在构建时生成一个“入口描述文件”，运行时动态加载对应模块。
- host：消费远程模块的应用，可同时暴露自己的模块
- remote：提供模块给其他应用使用
- shared：声明共享依赖，避免重复加载，如 React、Vue 等
配置示例如下：
new ModuleFederationPlugin({name: 'app1',
filename: 'remoteEntry.js',
remotes: {
app2: 'app2@http://localhost:3002/remoteEntry.js'
},
exposes: {
'./Button': './src/components/Button'
},
shared: { react: { singleton: true }, 'react-dom': { singleton: true } }
})
常见架构模式设计
实际项目中，模块联邦常用于以下几种结构：
立即学习“Java免费学习笔记（深入）”；
- 基座 + 微应用：主应用作为容器，动态加载子应用页面或组件，适合多团队协作的大平台
- 对等协作：多个应用互为 remote，双向共享组件或逻辑，适用于功能交叉的系统
- 组件级共享：建立独立的 UI 库应用，专门暴露通用组件，被多个业务引用
推荐将公共依赖（如状态管理、工具函数）抽离到 shared 配置中，并设置 singleton 保证单例。
运行时集成与加载控制
模块联邦不是静态打包，而是运行时动态获取模块，因此网络和加载时机很重要。
- 可通过异步 import() 按需加载远程组件，避免首屏性能问题
- 结合 React.lazy 和 Suspense 实现组件级懒加载
- 添加 loading 和错误降级处理，提升用户体验
示例：
const RemoteButton = React.lazy(() => import('app2/Button'));function App() {
return (
<React.Suspense fallback="Loading...">
<RemoteButton />
</React.Suspense>
);
}
版本管理与兼容性策略
多个团队独立发布，容易出现接口不一致或依赖冲突。
- 建议远程模块暴露稳定 API，内部变更不影响消费者
- 使用 semantic versioning 控制 remoteEntry.js 地址，避免意外升级
- shared 依赖建议固定大版本，配合 requiredVersion 确保兼容
- 上线前进行契约测试或集成验证，防止运行时报错
基本上就这些。模块联邦降低了微前端的技术门槛，但合理设计共享边界和通信机制才是长期维护的关键。不复杂但容易忽略。
