模块联邦是Webpack 5实现跨应用共享代码的方案，允许主机应用动态加载远程模块，如共享React组件；通过ModuleFederationPlugin配置exposes暴露组件、remotes引入远程模块，并设置shared确保依赖单例；使用时需注意React单例、版本兼容、异步加载处理及部署顺序，适用于多团队共用组件库的微前端场景，提升协作效率与维护性。
模块联邦（Module Federation）是 Webpack 5 引入的一项强大功能，它让多个独立的 JavaScript 应用在运行时共享代码，比如组件、工具函数或状态管理模块。这在微前端架构中特别有用，允许不同团队开发的应用之间直接共享 UI 组件，而无需通过 npm 发布私有包或复制代码。
什么是模块联邦
模块联邦让一个应用（称为“主机”）可以暴露部分模块给其他应用（称为“远程”），同时也能从其他应用动态加载模块。这意味着你可以把通用的 React 或 Vue 组件放在一个共享应用中，其他项目在构建时不需要打包这些组件，而是在运行时按需加载。
核心优势包括：
- 避免重复打包相同组件
- 实现跨应用热更新（只要远程模块更新，主机自动获取最新版本）
- 支持独立部署，各应用可自行升级不影响对方
如何配置模块联邦共享组件
以两个 React 应用为例：一个是组件库应用（shared-ui），另一个是业务应用（app-host）。
立即学习“Java免费学习笔记（深入）”；
在 shared-ui 的 webpack 配置中启用 Module Federation 插件并暴露组件：
new ModuleFederationPlugin({
name: 'sharedUi',
filename: 'remoteEntry.js',
exposes: {
'./Button': './src/components/Button',
'./Modal': './src/components/Modal',
},
shared: { react: { singleton: true }, 'react-dom': { singleton: true } }
})
在 app-host 中引入远程组件：
new ModuleFederationPlugin({
name: 'appHost',
remotes: {
sharedUi: 'sharedUi@http://localhost:3001/remoteEntry.js'
},
shared: { react: { singleton: true }, 'react-dom': { singleton: true } }
})
然后就可以在 app-host 中像导入本地模块一样使用：
const Button = await import('sharedUi/Button');
实际使用中的注意事项
虽然模块联邦很强大，但有几个关键点需要注意才能稳定运行：
- React 单例配置：确保所有应用共享同一个 React 实例，否则会出现“Invalid Hook Call”错误。必须设置 shared 中的 react 和 react-dom 为 singleton
- 版本兼容性：远程模块和主机之间的依赖版本要尽量一致，尤其是对第三方库的引用
- 加载时机处理：远程组件是异步加载的，需要处理加载状态或使用 Suspense
- 构建与部署顺序：如果主机依赖远程模块，需确保远程服务已上线且 remoteEntry.js 可访问
适用于哪些场景
模块联邦最适合以下几种情况：
- 大型组织内多个团队维护不同的子应用，但共用一套设计系统组件
- 需要快速集成新功能模块，而不希望重新打包主应用
- 构建 Shell 应用，动态组合来自不同服务的页面或组件
不适合用于小型项目或组件复用需求少的场景，因为会增加架构复杂度。
基本上就这些。模块联邦降低了跨应用共享组件的技术门槛，真正实现了“即插即用”的前端模块化。只要配置得当，它可以显著提升多应用项目的协作效率和维护性。
