Module Federation 如何集成 React、Vue 和 Angular？

Module Federation 和具体框架没有强绑定，它解决的是运行时模块加载和依赖共享问题。React、Vue、Angular 都能接入，但接入方式差异很大：React 通常暴露组件，Vue 要注意异步组件和运行时版本，Angular 更依赖路由、模块边界和构建插件。真正的难点不是写出 exposes，而是让 Host 和 Remote 在依赖、样式、路由和降级策略上保持一致。

React 集成更适合组件级暴露

React 里最常见的做法是 Remote 暴露业务组件，Host 用 React.lazy 加 Suspense 加载。react 和 react-dom 一般要配置成单例，否则 hooks、context 或渲染根很容易出现奇怪问题。

js
new ModuleFederationPlugin({
  name: 'profile',
  filename: 'remoteEntry.js',
  exposes: { './UserCard': './src/UserCard' },
  shared: {
    react: { singleton: true, requiredVersion: deps.react },
    'react-dom': { singleton: true, requiredVersion: deps['react-dom'] }
  }
})

Host 侧不要只写懒加载，还要配错误边界。Remote 下线、CDN 缓存错乱或版本不兼容时，用户看到局部降级比整页白屏更可接受。

Vue 集成要看 Vue 2 还是 Vue 3

Vue 3 可以用 defineAsyncComponent 加载远程组件，体验接近 React.lazy。Vue 2 项目也能做，但通常需要额外桥接，尤其是运行时编译、插件注入和全局组件注册会更麻烦。

js
import { defineAsyncComponent } from 'vue'

export default {
  components: {
    RemoteButton: defineAsyncComponent(() => import('shop/Button'))
  }
}

Vue 的坑常出在全局状态和样式上。Remote 如果默认安装自己的 router、pinia 或全局指令，可能会和 Host 抢上下文。更稳的方式是把 Remote 当成纯组件，必要上下文由 Host 显式传入。

Angular 更适合按路由或 feature 暴露

Angular 项目通常不建议只暴露一个零散组件，而是暴露 feature module、standalone component 或路由入口。这样依赖注入边界更清楚，团队也更容易独立发布。Angular 生态里常用专门的 Module Federation 辅助插件来处理 webpack 配置和共享依赖。

ts
const routes = [
  {
    path: 'billing',
    loadChildren: () =>
      import('billing/Routes').then(m => m.remoteRoutes)
  }
]

Angular 的取舍是规范强、集成成本也更高。@angular/core、rxjs、zone.js 等版本要统一，否则运行时错误经常不在加载阶段暴露，而是在 DI 或变更检测时才爆。

运行时契约比框架选择更重要

无论 Remote 用什么框架，Host 都要提前约定输入、输出和生命周期。比如组件接收哪些 props、如何通知保存成功、异常时返回什么错误码、卸载时是否清理定时器和全局监听。这个契约最好写成类型声明或小型 SDK，而不是靠团队口头约定。框架可以各自演进，但契约一旦频繁变化，Module Federation 就会从解耦工具变成联调负担。

跨框架集成要先定接口

React 直接消费 Vue 组件、Angular 挂载 React 页面并不是不行，但最好不要把它当默认方案。跨框架的边界应该更粗，比如一个完整业务区块，而不是一个按钮或表单项。接口层建议用 props、custom event、URL 参数或轻量事件总线，避免互相依赖对方的状态管理库。

追问

React、Vue、Angular 接入时最大的差别是什么？

React 更轻，通常暴露组件就能跑；Vue 要处理异步组件、插件和全局上下文；Angular 更适合按路由或模块切分。取舍在于 React 灵活但约束少，Angular 约束多但团队边界更稳定。边界判断可以看 Remote 是否需要自己的路由和依赖注入，如果需要，就不要强行做成一个小组件。踩坑点是为了统一形式，把所有框架都包装成“组件”，最后状态和生命周期反而更乱。

shared 依赖一定要 singleton 吗？

不一定。React、Vue、Angular core、全局状态库这类必须共享运行时上下文的依赖适合 singleton: true。工具库如 lodash、dayjs、纯函数 SDK 可以不强制单例，避免版本互相卡死。取舍是单例能减少包体和冲突，但会放大版本治理压力。项目早期可以先收紧核心依赖，普通工具库等出现体积问题再治理。

跨框架复用组件值得做吗？

值得，但边界要粗。一个支付页、报表区块、账号设置面板适合跨框架复用；一个输入框、弹窗、下拉菜单不适合，因为样式、事件和表单状态会把成本吃光。跨框架组件最好用清晰 props 和事件通信，不要共享内部 store。踩坑最多的是 React Host 想控制 Vue Remote 的每个内部状态，最后等于把两个框架的复杂度叠加在一起。

如何处理样式隔离？

同框架项目可以优先用 CSS Modules、BEM 或 CSS-in-JS，跨框架或多团队场景可以考虑 Shadow DOM。Shadow DOM 隔离更强，但主题变量、弹层、字体和调试会更麻烦。取舍是强隔离会降低统一体验，弱隔离又容易互相污染。比较稳的做法是约定设计 token 和命名前缀，再把真正高风险的第三方 Remote 放进 Shadow DOM。

结论

Module Federation 接入框架时，配置只是第一步。React 关注单例和错误边界，Vue 关注异步组件和上下文，Angular 关注路由模块和版本一致性。跨框架不是越细越好，边界越清楚，后期升级和排障越省事。