模块联邦是Webpack 5实现微前端的核心技术，允许应用在运行时动态共享模块。通过配置ModuleFederationPlugin，remote-app暴露Button等组件，host-app以import方式远程加载并渲染，支持按需加载与依赖隔离。结合shared优化依赖、动态加载逻辑及CI/CD管理remotes，可构建高效、灵活的微前端体系，适用于多团队协作场景。
微前端架构中，模块联邦（Module Federation）是 Webpack 5 提出的一项革命性功能，它让不同团队、不同项目之间可以像加载本地模块一样共享代码，真正实现运行时的模块级集成。相比传统微前端通过 iframe 或运行时拼接 HTML 的方式，模块联邦更轻量、高效，且天然支持按需加载和版本隔离。
什么是模块联邦？
模块联邦允许一个打包好的应用（通常是 webpack 构建的应用）暴露部分模块，供其他应用在运行时动态加载。这意味着：
- 主应用可以加载子应用的组件，就像 import 本地文件一样
- 子应用也可以消费主应用提供的公共依赖或工具函数
- 各应用可独立开发、部署，互不影响
核心优势在于“运行时模块共享”，而不是构建时打包合并。
实战：搭建主应用与远程子应用
假设我们有两个项目：
立即学习“Java免费学习笔记（深入）”；
- host-app（主应用，端口 3000）
- remote-app（远程子应用，端口 3001）
在 remote-app 的 webpack.config.js 中启用模块联邦：
const { ModuleFederationPlugin } = require("webpack").container;
module.exports = {
mode: "development",
devServer: { port: 3001 },
plugins: [
new ModuleFederationPlugin({
name: "remoteApp",
filename: "remoteEntry.js",
exposes: {
"./Button": "./src/components/Button",
"./App": "./src/App",
},
shared: { react: { singleton: true }, "react-dom": { singleton: true } },
}),
],
};
2. 配置 host-app（消费者）
host-app 引入 remote-app 暴露的模块：
new ModuleFederationPlugin({
name: "hostApp",
remotes: {
remoteApp: "remoteApp@http://localhost:3001/remoteEntry.js",
},
shared: { react: { singleton: true }, "react-dom": { singleton: true } },
});
3. 在 host-app 中使用远程组件
创建一个异步加载组件：
const RemoteButton = React.lazy(() => import("remoteApp/Button"));
function App() {
return (
<div>
<h1>Host App</h1>
<React.Suspense fallback="Loading...">
<RemoteButton />
</React.Suspense>
</div>
);
}
启动两个服务后，host-app 就能渲染来自 remote-app 的 Button 组件。
高级用法与最佳实践
模块联邦不只是加载 UI 组件，还能共享逻辑、状态、路由甚至整个子应用。
共享依赖优化通过 shared 配置避免重复加载 React、Lodash 等库：
shared: {
react: { singleton: true, eager: true },
"react-router-dom": { singleton: true },
lodash: { requiredVersion: "^4.17.0" }
}
设置 singleton: true 可确保全局只有一个实例，防止冲突。
运行时动态加载远程模块有时需要根据用户权限或环境决定加载哪个模块：
async function loadRemoteComponent(scope, module) {
await __webpack_init_sharing__("default");
const container = window.remoteApp; // 来自 remoteEntry
await container.init(__webpack_share_scopes__.default);
const factory = await window.remoteApp.get(module);
return factory();
}
构建部署建议
- 远程应用发布后必须保留旧版 remoteEntry.js 兼容一段时间
- 使用 CI/CD 自动校验 exposed 模块 API 变更
- 主应用可通过配置中心动态管理 remotes 地址，实现灰度切换
总结
模块联邦改变了微前端的集成方式，从“页面拼接”走向“模块直连”。它降低了技术栈耦合，提升了复用效率，特别适合大型组织中多个团队协作开发复杂系统。只要合理设计暴露边界、管理依赖版本，就能构建灵活、可扩展的微前端体系。
基本上就这些，关键在于理解“谁暴露、谁引用、如何共享依赖”。实际落地时建议从小功能模块试点，逐步推进。
