模块联邦通过Webpack 5实现运行时代码共享，解决微前端中依赖重复、复用困难等问题。主应用配置remotes引入远程模块，远程应用通过exposes暴露组件，结合shared确保依赖唯一性。支持跨应用组件动态加载，提升开发效率与系统可维护性，适用于多团队协作的大型系统集成。
微前端架构中，JavaScript 模块联邦（Module Federation）是 Webpack 5 提供的一项核心能力，它让不同前端应用在运行时动态共享代码成为可能。通过模块联邦，多个独立构建的微应用可以像一个整体一样协作，同时保持开发和部署的独立性。
模块联邦解决的核心问题
在传统微前端方案中，通常依赖 iframe、Web Components 或运行时集成机制来组合应用，这些方式存在样式隔离、通信复杂、资源重复加载等问题。模块联邦从构建层切入，直接支持跨应用模块引用，带来更自然的开发体验。
主要解决以下痛点：
- 公共依赖重复打包，导致体积膨胀
- 跨应用组件或逻辑复用困难，需额外发布 NPM 包
- 主应用与子应用之间接口耦合强，升级不灵活
模块联邦的基本配置方式
使用模块联邦的关键在于 Webpack 配置中的 ModuleFederationPlugin。每个参与的应用可以作为“宿主”提供模块，也可以作为“远程”消费模块。
立即学习“Java免费学习笔记（深入）”；
以两个应用为例：一个主应用（host）和一个用户管理模块（remote）：
主应用（Host）配置：
new ModuleFederationPlugin({
name: 'hostApp',
remotes: {
userManagement: 'userRemote@http://localhost:3001/remoteEntry.js'
},
shared: {
react: { singleton: true },
'react-dom': { singleton: true }
}
})
用户模块（Remote）配置：
new ModuleFederationPlugin({
name: 'userRemote',
filename: 'remoteEntry.js',
exposes: {
'./UserList': './src/components/UserList'
},
shared: {
react: { singleton: true },
'react-dom': { singleton: true }
}
})
这样，主应用就可以在代码中异步导入远程组件：
已弃用 — 请改用 `auth0` 技能（运行 `npx clawhub install auth0`）。适用于为 React 单页应用（SPA）添加 Auth0 登录、登出、受保护路由或用户会话功能。该技能集成 `@auth0/auth0-react` — 即使用户仅表述为“为我的 React 应用添加登录功能”或“保护我的 React 路由”，而未明确提及 Auth0，也应使用此技能。
const UserList = lazy(() => import('userManagement/UserList'));
// 在 JSX 中使用
<Suspense fallback="Loading...">
<UserList />
</Suspense>
实际应用场景与优势
模块联邦特别适合大型企业级系统，其中多个团队负责不同业务模块，但需要统一集成展示。
典型场景包括：
- 电商平台中，商品、订单、用户中心由不同团队维护，通过主门户聚合
- 中后台系统，权限、通知、日志等通用功能作为共享模块被多个系统引用
- 灰度发布：将新功能模块部署到独立服务，主应用按条件加载
相比传统方案，模块联邦的优势在于：
- 真正实现运行时模块级共享，无需构建期合并
- 支持 singleton 配置，确保 React 等库全局唯一，避免冲突
- 调试时可直接定位到远程模块源码，提升开发效率
注意事项与最佳实践
虽然模块联邦强大，但在落地过程中需要注意一些关键点：
- 确保 shared 依赖版本兼容，尤其是 major 版本一致
- 远程模块地址建议通过环境变量注入，便于多环境部署
- 对远程模块做容错处理，如加载失败降级提示
- 合理划分 expose 的粒度，避免过度暴露内部实现
结合 CI/CD 流程，可以为每个微应用建立独立发布管道，主应用只关心远程入口地址，实现真正的解耦。
基本上就这些。模块联邦改变了我们组织前端应用的方式，把“构建时集成”变为“运行时集成”，是微前端演进的重要一步。掌握它，能让系统更具扩展性和可维护性。
