模块联邦通过运行时动态共享代码，解决微前端重复打包与版本不一致问题。构建时配置exposes和remotes定义模块暴露与引用，Webpack 5生成远程入口，主应用运行时import加载远程模块，浏览器自动请求chunk并执行。支持共享UI组件（如UserCard）、工具函数、状态管理实例（Redux store），并通过shared配置统一依赖版本，避免多份副本。各团队可独立开发部署，远程更新无需重新构建消费者，本地调试可用代理指向本地服务，适用于多团队协作场景，实现按需加载与动态组合。
模块联邦通过让不同前端应用在运行时直接共享代码，解决了微前端中常见的重复打包和版本不一致问题。它不需要将共享逻辑提前打包成独立的库，而是由 Webpack 5 在构建时生成“远程入口”，允许一个应用动态加载另一个应用暴露的模块。
模块联邦的核心机制
Webpack 5 的模块联邦功能在构建阶段为每个参与的应用配置一个 red">remotes 和 exposes 字段：
- exposes 定义当前应用愿意对外提供的模块路径，比如组件、工具函数或状态管理模型
- remotes 指定从哪些远程应用加载模块，格式为别名 + 远程应用的全局变量名和入口地址
构建后，主应用在运行时通过 import 语法请求远程模块，浏览器会自动发起网络请求获取对应 chunk，并将其挂载到本地模块系统中执行。
实现 UI 组件与业务逻辑共享
多个微前端团队可以约定统一暴露通用组件或 hooks：
立即学习“Java免费学习笔记（深入）”；
- 例如用户中心应用 expose 了
@components/UserCard，订单系统在 remotes 中引用该应用后，可直接 import 使用 - 共享工具类如权限校验、数据格式化也可通过这种方式复用，避免各子应用重复实现
- 状态管理方面，若使用 Redux 或 Zustand，可暴露 store 实例或 action creators，实现跨应用状态同步
运行时依赖解析与版本控制
模块联邦支持共享依赖项，防止同一库被多次打包：
- 通过
shared配置声明第三方库（如 React、Lodash），确保所有应用使用相同实例 - 可设置版本匹配策略，例如允许 minor 版本兼容，但阻止 major 不兼容升级
- 当主应用已加载某个版本时，远程模块会自动复用，减少资源重复下载
部署与协作模式
各团队可独立开发和部署自己的应用：
- 远程应用上线新版本后，只要接口不变，消费方无需重新构建即可自动使用最新逻辑
- 本地开发时可通过代理将 remotes 指向本地服务，方便联调调试
- 适用于大型组织中多个团队协作维护多个子应用的场景，提升整体迭代效率
基本上就这些。模块联邦让微前端从“静态集成”走向“动态共享”，真正实现了按需加载和运行时组合。
