模块联邦是Webpack 5实现微前端的核心技术，允许应用在运行时动态共享模块。通过expose暴露组件、remotes引入远程模块，并借助shared优化依赖，实现跨应用代码复用与独立部署，适用于多团队协作、系统迁移和插件化架构场景。
微前端架构中，模块联邦（Module Federation）是 Webpack 5 提出的一种革命性方案，它让不同前端应用在运行时动态共享代码成为可能。不同于传统的依赖打包或组件库发布模式，模块联邦允许一个构建好的应用直接暴露模块，被另一个应用按需加载和使用，真正实现跨应用的代码复用和独立部署。
什么是模块联邦？
模块联邦是 Webpack 5 内置的一项功能，核心思想是“将应用变成可被引用的模块仓库”。每个微前端应用可以：
- 暴露（expose）自己的组件、工具函数或状态管理模块
- 远程（remote）加载其他应用暴露的模块
- 在不重新构建自身的情况下使用最新版本的远程模块
这种机制打破了传统打包时静态依赖的限制，实现了真正的运行时集成。
基本配置示例
假设我们有两个项目：一个是主机应用（host），另一个是远程组件库（remote）。以下是关键配置片段。
立即学习“Java免费学习笔记（深入）”；
远程应用（Remote App）配置：
new ModuleFederationPlugin({name: 'remoteApp',
filename: 'remoteEntry.js',
exposes: {
'./Button': './src/components/Button',
'./utils': './src/utils'
},
shared: { react: { singleton: true }, 'react-dom': { singleton: true } }
})
主机应用（Host App）配置：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
name: 'hostApp',
remotes: {
remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js'
},
shared: { react: { singleton: true }, 'react-dom': { singleton: true } }
})
配置完成后，主机应用就可以像导入本地模块一样使用远程组件：
import Button from 'remoteApp/Button';function App() {
return <div><Button /></div>;
}
共享依赖与性能优化
模块联邦通过 shared 配置避免重复加载第三方库。常见做法包括：
- 设置 singleton: true 确保 React、Redux 等核心库全局唯一实例
- 利用 webpack 的自动版本匹配机制，减少兼容性问题
- 结合 CDN 和缓存策略提升 remoteEntry.js 加载速度
- 使用异步加载（import()）延迟加载非首屏远程模块
这样既能保证运行一致性，又能减少包体积和内存占用。
实际应用场景
模块联邦特别适合以下场景：
- 大型组织内多个团队独立开发，但需要共享 UI 组件或业务逻辑
- 老系统逐步迁移过程中，新旧模块共存运行
- 平台型产品中插件化加载子应用（如仪表盘、报表模块）
- 多租户系统中根据不同客户动态加载定制功能
它降低了系统耦合度，同时保留了技术栈灵活性。
基本上就这些。模块联邦不是银弹，但它为微前端提供了一种原生、高效且低侵入的集成方式。只要合理规划暴露边界和依赖管理，就能大幅提升前端架构的可维护性和扩展性。
