J*aScript模块联邦_跨应用组件共享_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

J*aScript模块联邦_跨应用组件共享

2025-11-24

浏览次数：次

返回列表

模块联邦是Webpack 5实现跨应用共享代码的方案，允许主机应用动态加载远程模块，如共享React组件；通过ModuleFederationPlugin配置exposes暴露组件、remotes引入远程模块，并设置shared确保依赖单例；使用时需注意React单例、版本兼容、异步加载处理及部署顺序，适用于多团队共用组件库的微前端场景，提升协作效率与维护性。

javascript模块联邦_跨应用组件共享

模块联邦（Module Federation）是 Webpack 5 引入的一项强大功能，它让多个独立的 J*aScript 应用在运行时共享代码，比如组件、工具函数或状态管理模块。这在微前端架构中特别有用，允许不同团队开发的应用之间直接共享 UI 组件，而无需通过 npm 发布私有包或复制代码。

什么是模块联邦

模块联邦让一个应用（称为“主机”）可以暴露部分模块给其他应用（称为“远程”），同时也能从其他应用动态加载模块。这意味着你可以把通用的 React 或 Vue 组件放在一个共享应用中，其他项目在构建时不需要打包这些组件，而是在运行时按需加载。

核心优势包括：

避免重复打包相同组件
实现跨应用热更新（只要远程模块更新，主机自动获取最新版本）
支持独立部署，各应用可自行升级不影响对方

如何配置模块联邦共享组件

以两个 React 应用为例：一个是组件库应用（shared-ui），另一个是业务应用（app-host）。

在 shared-ui 的 webpack 配置中启用 Module Federation 插件并暴露组件：

new ModuleFederationPlugin({
  name: 'sharedUi',
  filename: 'remoteEntry.js',
  exposes: {
    './Button': './src/components/Button',
    './Modal': './src/components/Modal',
  },
  shared: { react: { singleton: true }, 'react-dom': { singleton: true } }
})

在 app-host 中引入远程组件：

Avatar AI

AI成像模型，可以从你的照片中生成逼真的4K头像

92 查看详情 Avatar AI

new ModuleFederationPlugin({
  name: 'appHost',
  remotes: {
    sharedUi: 'sharedUi@http://localhost:3001/remoteEntry.js'
  },
  shared: { react: { singleton: true }, 'react-dom': { singleton: true } }
})

然后就可以在 app-host 中像导入本地模块一样使用：

const Button = await import('sharedUi/Button');

实际使用中的注意事项

虽然模块联邦很强大，但有几个关键点需要注意才能稳定运行：

React 单例配置：确保所有应用共享同一个 React 实例，否则会出现“Invalid Hook Call”错误。必须设置 shared 中的 react 和 react-dom 为 singleton
版本兼容性：远程模块和主机之间的依赖版本要尽量一致，尤其是对第三方库的引用
加载时机处理：远程组件是异步加载的，需要处理加载状态或使用 Suspense
构建与部署顺序：如果主机依赖远程模块，需确保远程服务已上线且 remoteEntry.js 可访问