模块联邦是Webpack 5实现微前端的核心技术，支持运行时跨应用共享模块。通过exposes暴露组件、remotes引入远程模块，结合shared优化依赖，实现按需加载与独立部署，适用于多团队协作场景，但要求统一构建工具并面临调试和网络延迟挑战。
模块联邦（Module Federation）是 Webpack 5 引入的一项革命性功能，它让多个独立的 JavaScript 应用在运行时共享代码成为可能。这正是微前端架构得以实现的关键技术之一。不同于传统的构建时依赖打包，模块联邦允许一个应用动态加载另一个应用暴露出来的模块，真正实现了“按需加载”和“跨应用复用”。
什么是模块联邦？
模块联邦的核心思想是：每个微前端应用都可以作为“宿主”或“远程”，既能消费其他应用的模块，也能将自己的模块暴露出去。这种机制打破了传统打包工具对代码边界的硬性限制。
它的实现依赖于 Webpack 的两个关键配置：
- exposes：声明当前应用要对外暴露的模块路径
- remotes：定义从哪个远程应用加载模块，以及对应的访问入口
例如，一个登录组件可以由用户中心应用暴露，而订单、商品等子应用在需要时直接引用这个远程组件，无需复制代码或发布公共库。
立即学习“Java免费学习笔记（深入）”；
如何实现微前端集成？
使用模块联邦搭建微前端，重点在于合理划分职责和加载时机。通常有一个容器应用（也叫基座）负责页面布局和路由协调，其他子应用则专注于业务功能。
具体操作步骤如下：
- 容器应用通过 remotes 配置指向各个子应用的远程入口文件（如 remoteEntry.js）
- 子应用通过 exposes 暴露可被调用的组件或方法
- 容器应用使用 import() 动态导入远程模块，并渲染到指定位置
这种方式下，各团队可以独立开发、部署自己的应用，只要接口不变，升级不会影响其他系统。
共享依赖与性能优化
模块联邦支持 shared 配置，用于声明哪些依赖应由多个应用共用，比如 React、Lodash 等。这样可以避免重复打包，减少资源体积。
需要注意的是：
- 版本不一致时可通过 singleton 确保只加载一个实例
- 远程模块建议按需懒加载，提升首屏速度
- remoteEntry.js 文件体积要控制，避免阻塞主流程
结合 CDN 和缓存策略，能进一步提升多应用协同的加载效率。
实际应用场景与局限性
模块联邦适合大型组织中多个团队协作维护复杂系统的场景。比如电商平台中，商品、购物车、支付分别由不同团队负责，通过模块联邦整合成统一界面。
但它也有约束：
- 所有参与方必须使用 Webpack 5+，技术栈需保持一定统一
- 调试跨应用问题比单体更复杂
- 网络延迟可能影响远程模块加载体验
因此，在选择前应评估团队规模、部署流程和技术成熟度。
基本上就这些。模块联邦不是银弹，但在合适的场景下，它能让微前端真正做到“松耦合、紧协同”。
