模块联邦是Webpack 5实现微前端的核心技术，允许运行时动态加载远程应用模块。通过配置exposes暴露子应用组件，remotes在主应用按需引入，实现独立部署、灵活共享依赖与运行时集成，适用于多团队协作、渐进式迁移等场景。
微前端架构让多个团队可以独立开发、部署前端应用，同时还能在同一个页面中协同工作。模块联邦（Module Federation）是 Webpack 5 提供的一种原生能力，它让 JavaScript 模块可以直接跨应用共享，无需发布到 npm 或构建时打包，真正实现了运行时的模块加载与通信。
什么是模块联邦？
模块联邦允许一个 Webpack 打包的应用在运行时动态加载另一个 Webpack 打包应用中的模块。这意味着你可以把微前端中的子应用当作“远程模块”来使用，主应用能直接引用子应用暴露的组件、函数甚至状态管理模块。
核心优势在于：
- 真正的独立部署：每个子应用可独立构建、部署，不依赖统一发布流程。
- 共享依赖更灵活：可配置共享第三方库（如 React、Vue），避免重复加载。
- 运行时集成：不需要构建时合并代码，主应用在浏览器中按需加载远程模块。
基本实现结构
以主应用（Host）和子应用（Remote）为例，通过 Webpack 配置启用模块联邦。
立即学习“Java免费学习笔记（深入）”；
子应用需要暴露自己的模块，比如一个 React 组件：
// webpack.config.js (子应用)
const { ModuleFederationPlugin } = require("webpack").container;
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: "userApp",
filename: "remoteEntry.js",
exposes: {
"./UserProfile": "./src/components/UserProfile",
},
shared: ["react", "react-dom"],
}),
],
};
主应用配置（Host）
主应用远程导入子应用暴露的模块：
// webpack.config.js (主应用)
new ModuleFederationPlugin({
name: "mainApp",
remotes: {
userApp: "userApp@http://localhost:3001/remoteEntry.js",
},
shared: ["react", "react-dom"],
});
在主应用中使用远程组件
// App.js
import React, { Suspense } from "react";
const RemoteUserProfile = React.lazy(() => import("userApp/UserProfile"));
function App() {
return (
<div>
<h1>主应用</h1>
<Suspense fallback="加载中...">
<RemoteUserProfile />
</Suspense>
</div>
);
}
export default App;
常见应用场景
模块联邦特别适合以下场景：
- 大型组织多团队协作：不同业务线维护各自的前端模块，主门户集成展示。
- 渐进式迁移：老系统逐步替换，新旧应用共存，通过联邦调用过渡。
- 插件化架构：支持动态加载第三方插件模块，扩展系统功能。
- 多租户平台：为不同客户加载定制化模块，主框架统一调度。
注意事项与优化建议
虽然模块联邦强大，但实际使用中需要注意：
- 版本兼容性：确保主应用与子应用使用的共享依赖（如 React）版本兼容，可通过 shared 配置指定 requiredVersion。
- 加载失败处理：网络异常或远程服务不可用时，应有 fallback UI 和重试机制。
- 构建产物路径正确：确保 remoteEntry.js 能被正确访问，注意 publicPath 配置。
- 性能监控：远程模块加载时间影响用户体验，建议接入性能追踪。
基本上就这些。模块联邦降低了微前端的实现门槛，让前端应用间的解耦与集成变得更自然。只要合理规划模块边界和通信方式，就能构建出灵活、可扩展的大型前端系统。
