17370845950

模块联邦是Webpack 5实现运行时代码共享的核心方案，支持远程模块按需加载、依赖版本统一及热更新，但需注意React版本一致、样式隔离、路由协调与错误边界处理。

模块联邦（Module Federation）是 Webpack 5 引入的一项核心能力，它允许不同构建产物在运行时动态共享代码（比如 React 组件、工具函数、状态管理模块等），而无需重新打包或发布。它不是微前端的唯一方案，但已成为实现“运行时集成”型微前端最主流、最原生的方式之一。

模块联邦如何解决微前端的关键问题？

传统微前端（如 iframe、single-spa）常面临样式隔离难、状态不共享、通信繁琐、首屏加载慢等问题。模块联邦不替代路由或生命周期管理，而是专注解决代码级协同：让多个独立应用能像调用本地模块一样，直接 import 远程模块。

• 远程应用暴露组件或 Hook，主应用按需加载并渲染，无须构建时合并代码
• 共享依赖（如 React、lodash）可统一版本，避免重复加载和冲突
• 支持热更新远程模块（配合容器应用刷新机制），实现局部迭代

核心配置：Host 与 Remote 的角色分工

模块联邦中分 Host（容器/壳应用）和 Remote（子应用）。两者通过 Webpack 配置声明能力：

• Remote 端：在 webpack.config.js 中使用 ModuleFederationPlugin 的 exposes 字段导出模块，例如：
  exposes: { './Button': './src/components/Button' }
• Host 端：在相同插件中用 remotes 声明远程地址（支持 Promise 动态加载），例如：
  remotes: { 'remoteApp': 'remoteApp@https://cdn.example.com/remoteEntry.js' }
• Host 可直接写 import Button from 'remoteApp/Button' —— Webpack 在构建时不做解析，运行时才拉取并执行 remoteEntry.js

实际落地要注意什么？

模块联邦很强大，但容易踩坑：

• React 版本必须一致：若 Host 和 Remote 各用不同 React，会触发 “Invalid hook call” 错误；需通过 shared 显式指定单例（requiredVersion: '^18.2.0'）
• 样式需额外处理：CSS 不会自动隔离，推荐用 CSS-in-JS（如 styled-components）、CSS Modules，或约定 BEM + 命名空间
• 路由仍需协调：模块联邦不管 URL 跳转，需结合 react-router 或 single-spa 管理导航和生命周期
• 错误边界要加：远程模块加载失败或报错不能让整个页面崩溃，Host 应包裹 Suspense 和自定义 ErrorBoundary

基本上就这些。模块联邦不是银弹，但它把“跨团队协作”的耦合点从构建时移到了运行时，让微前端真正具备了松耦合、渐进演进的能力。