模块联邦通过运行时共享代码实现微前端高效集成。主应用配置remotes加载远程子应用，子应用用exposes暴露模块，shared确保依赖去重。例如主应用可直接导入userApp/UserList组件，实现跨应用调用。优势包括独立部署、技术栈共存、依赖共享，需注意版本统一与接口稳定。
模块联邦（Module Federation）是 Webpack 5 提供的一种强大机制，它允许不同的 JavaScript 应用在运行时共享代码，而无需提前打包成独立库。在微前端架构中，模块联邦解决了多个子应用之间依赖共享、重复打包和动态加载的问题，让微前端的实现更加高效和灵活。
模块联邦的基本原理
模块联邦通过在构建时配置远程入口，使得一个应用（宿主应用）可以动态加载另一个应用（远程应用）暴露的模块。这种“远程模块本地化”的能力，使得每个子应用可以独立开发、构建和部署。
核心配置包括：
- name：当前应用的唯一标识
- remotes：声明要加载的远程应用
- exposes：暴露本应用中的模块供其他应用使用
- shared：定义与远程应用共享的依赖（如 React、Vue 等）
在微前端中的典型应用场景
假设有一个基于 React 的主应用（容器），需要集成用户管理、订单中心两个独立开发的子应用。
立即学习“Java免费学习笔记（深入）”；
具体做法如下：
- 主应用通过 remotes 配置指向用户管理和订单中心的远程入口文件
- 子应用使用 exposes 暴露各自的根组件或页面模块
- 主应用像导入本地模块一样导入远程组件，并渲染到指定区域
- 通过 shared 配置确保 React、React Router 等核心库只加载一次，避免版本冲突
例如，主应用中可以这样使用：
import UserList from 'userApp/UserList';尽管 userApp 不在本地 node_modules 中，但模块联邦会在运行时从远程拉取并执行。
优势与注意事项
使用模块联邦实现微前端的主要优势包括：
- 子应用完全独立部署，互不影响
- 支持不同技术栈共存（React + Vue 可以互相引用）
- 公共依赖可自动去重，减少整体体积
- 开发时可通过本地映射模拟远程模块，提升调试效率
需要注意的是：
- 需统一 shared 依赖的版本策略，避免兼容问题
- 远程应用必须保证接口稳定性，尤其是暴露的模块路径
- 网络延迟可能影响首次加载速度，建议配合懒加载和缓存策略
