模块联邦是Webpack 5实现微前端的核心技术，支持运行时动态加载远程子应用模块。主应用通过remotes引用子应用，子应用通过exposes暴露组件，shared配置共享依赖。例如主应用配置remotes引入remoteApp@http://localhost:3001/remoteEntry.js，子应用exposes导出Button组件，主应用可直接import Button from 'remoteApp/Button'。架构设计需明确主应用负责布局与路由，子应用专注业务功能，建立运行时通信机制，采用CSS Modules隔离样式，shared中设置requiredVersion确保依赖兼容，并设计加载失败降级方案。适用于多团队协作、系统迁移和插件化场景，但需应对调试复杂、构建产物稳定访问及首屏性能挑战，通过CDN部署、预加载和统一监控保障运行稳定性。
微前端架构的核心目标是将一个庞大的前端应用拆分成多个独立、可自治的子应用，实现团队间解耦和独立交付。在众多技术方案中，模块联邦（Module Federation） 由 Webpack 5 原生支持，成为当前最实用的微前端实现方式之一。
什么是模块联邦？
模块联邦允许一个 JavaScript 应用在运行时动态加载另一个构建好的应用中的代码模块，而无需提前打包在一起。这意味着：
- 主应用可以远程加载子应用的组件或页面
- 子应用之间能共享公共依赖，避免重复加载
- 各团队可独立开发、构建和部署自己的应用
它不是简单的资源引用，而是真正的模块级共享，支持函数、组件、状态管理等任意导出内容。
基本配置示例
以 Webpack 5 配置为例，启用模块联邦非常直接。
立即学习“Java免费学习笔记（深入）”；
主应用（容器）配置：
const { ModuleFederationPlugin } = require("webpack").container;
new ModuleFederationPlugin({
name: "hostApp",
remotes: {
remoteApp: "remoteApp@http://localhost:3001/remoteEntry.js"
},
shared: ["react", "react-dom"]
})
子应用（远程）配置：
new ModuleFederationPlugin({
name: "remoteApp",
filename: "remoteEntry.js",
exposes: {
"./Button": "./src/components/Button",
"./routes": "./src/routes"
},
shared: ["react", "react-dom"]
})
配置完成后，主应用就可以像导入本地模块一样使用远程组件：
import Button from 'remoteApp/Button';
微前端架构设计要点
要让模块联邦真正发挥价值，需结合合理的架构设计。
- 职责划分清晰：明确主应用负责布局和路由协调，子应用专注业务功能
- 运行时通信机制：通过全局事件、自定义 Hook 或状态上下文传递数据
- 样式隔离策略：建议使用 CSS Modules 或 BEM 规范减少样式冲突
- 版本兼容处理：shared 配置应指定 requiredVersion，防止依赖错乱
- 加载容错机制：远程模块加载失败时提供降级方案或提示
适用场景与挑战
模块联邦适合多团队协作、系统逐步迁移、插件化扩展等场景。但也要注意：
- 调试复杂度上升，需统一日志和错误上报机制
- 构建产物需稳定访问，CDN 或独立部署必不可少
- 初始加载可能变慢，可通过预加载优化体验
基本上就这些。模块联邦降低了微前端的技术门槛，关键在于结合团队实际情况设计合理的集成方式和协作规范。不复杂但容易忽略的是运行时的稳定性保障。
