模块联邦是Webpack 5实现微前端的核心技术，支持运行时动态共享模块。通过ModuleFederationPlugin配置宿主与远程应用，实现按业务域或团队拆分子应用，结合shared设置避免依赖重复加载，提升独立部署与复用效率。
微前端架构让大型前端项目可以像后端服务一样被拆分成多个独立、可独立部署的子应用。在众多实现方案中，模块联邦（Module Federation） 是 Webpack 5 原生支持的一项关键技术，它让不同构建的应用之间能够共享代码和组件，真正实现了“运行时集成”。
什么是模块联邦？
模块联邦是 Webpack 5 引入的一种机制，允许一个打包后的 JavaScript 应用动态加载另一个应用暴露出来的模块。这意味着你可以：
它不需要额外的中间层或构建时合并，所有依赖在运行时通过网络动态获取。
如何配置模块联邦？
核心是通过 Webpack 的 ModuleFederationPlugin 插件进行配置。分为两种角色：宿主应用（host）和远程应用（remote）。
立即学习“Java免费学习笔记（深入）”；
远程应用（提供模块） 配置示例：
new ModuleFederationPlugin({
name: 'userApp',
filename: 'remoteEntry.js',
exposes: {
'./UserProfile': './src/components/UserProfile',
'./api': './src/api/user'
},
shared: { react: { singleton: true }, 'react-dom': { singleton: true } }
})
宿主应用（消费模块） 配置示例：
new ModuleFederationPlugin({
name: 'mainApp',
remotes: {
userApp: 'userApp@http://localhost:3001/remoteEntry.js'
},
shared: { react: { singleton: true }, 'react-dom': { singleton: true } }
})
配置完成后，在宿主应用中就可以这样使用：
import UserProfile from 'userApp/UserProfile';
function App() {
return (
<div>
<h1>Main App</h1>
<UserProfile />
</div>
);
}
应用拆分的合理方式
微前端不是简单地把页面切开，而是基于业务边界进行垂直拆分。常见拆分策略包括：
- 按业务域拆分：如用户中心、订单管理、商品列表等各自独立为子应用
- 按团队划分：每个前端团队负责一个或多个子应用，独立开发、测试、发布
- 按功能层级拆分：比如将通用组件库、布局框架、权限系统作为共享远程模块提供
关键是要避免过度拆分导致通信复杂，也要防止共享过多造成耦合。
共享依赖与版本管理
多个应用共用 React、Lodash 等库时，可通过 shared 配置避免重复加载。
- 设置 singleton: true 可确保全局只有一个 React 实例，防止因多版本引发错误
- 使用 requiredVersion 指定兼容版本范围，提升稳定性
- 注意第三方库的副作用和上下文隔离问题，尤其是状态管理类库
例如：
shared: {
react: {
singleton: true,
requiredVersion: '^18.0.0'
},
'react-router-dom': {
singleton: true
}
}
模块联邦极大简化了微前端的集成成本，使应用间协作更灵活。只要规划好拆分边界和共享规则，就能在保持独立性的同时实现高效复用。基本上就这些，不复杂但容易忽略细节。
