17370845950

模块联邦是Webpack 5实现微前端松耦合与独立部署的核心方案，通过exposes、remotes、shared配置使子应用动态共享模块、状态及上下文，运行时按需加载remoteEntry.js，无需构建时打包。

模块联邦（Module Federation）是 Webpack 5 引入的一项核心能力，它允许一个 JavaScript 应用在运行时动态加载并使用另一个独立构建应用暴露的模块，而无需重新打包或发布依赖。它不是微前端的唯一方案，但已成为实现松耦合、独立部署微前端的关键基础设施。

模块联邦如何让不同团队的应用“互相认识”？

每个微前端子应用通过 Webpack 配置中的 ModuleFederationPlugin 定义自己“提供什么”和“需要什么”：

• exposes：声明本应用愿意对外共享的模块（如 React 组件、工具函数、Context、甚至整个路由页面）
• remotes：声明本应用要从其他远程应用加载哪些模块（例如：remoteApp@http://app-b.com/remoteEntry.js）
• shared：协调跨应用的依赖版本（如 React、React Router），避免重复加载或冲突，支持 singleton、eager 等策略

它怎么做到“运行时按需加载”，而不是构建时打包？

模块联邦不把远程模块打包进本地产物，而是生成一个轻量级的 remoteEntry.js 入口文件。当主应用执行 import("remoteApp/Component") 时：

• Webpack 运行时根据 remote 配置，自动发起请求加载对应远程应用的 remoteEntry.js
• 该入口文件包含远程模块的元信息和工厂函数，主应用通过其提供的 API 动态获取模块实例
• 整个过程对开发者透明，写法与普通 import 几乎一致（仅需配合 dynamic import）

代码共享不只是组件，还能共享状态与运行时上下文

模块联邦支持导出任意 JS 值，因此可以安全共享：

• 已初始化的 Redux store 或 Zustand store 实例（避免多份 store 冲突）
• 自定义 Hook（如 useAuth、useFeatureFlag）
• 全局样式注入器、主题 Provider、i18n 实例
• 甚至共享第三方库的包装层（如统一封装的 axios 实例 + 拦截器）

关键在于：这些共享模块需在 shared 中正确配置，并确保生命周期与挂载时机可控（例如只在首次使用时初始化）。

它解决了微前端中哪些真实痛点？

相比传统 iframe 或手动 script 加载，模块联邦带来实质性改进：

• 无跨域通信复杂性：所有模块运行在同一个 JS 上下文，可直接调用、传参、监听事件
• 无样式隔离开销：CSS-in-JS 或 CSS Modules 可自然共存；若需隔离，仍可配合 Shadow DOM 或 scoped class 策略
• 真正独立部署：子应用更新后只需替换自己的 remoteEntry.js 和资源文件，主应用无需重建
• 细粒度复用：不是整站嵌入，而是按需导入按钮、表单、图表等原子模块

不复杂但容易忽略：模块联邦本身不解决路由分发、应用激活、错误降级等问题——这些需上层框架（如 single-spa、qiankun）或自定义编排逻辑配合完成。