什么是JavaScript模块联邦？它如何助力微前端架构落地

JavaScript模块联邦是Webpack 5引入的一项运行时模块共享能力，它允许不同的构建产物在浏览器端互相引用代码，而无需在编译期把依赖打在一起。这种机制特别适合多个团队独立开发、独立部署却又需要组成统一界面的场景。借助模块联邦，一个电商平台的商品页应用可以直接使用订单应用暴露的结算组件，两边各自发版互不影响。

模块联邦的核心概念

模块联邦中最关键的角色是宿主（host）与远程（remote）。宿主应用通过配置remotes字段声明需要消费的远程应用入口，远程应用则通过exposes字段把内部模块暴露出去。两者在运行时通过动态的script标签加载对方的远程入口文件，从而拿到对方导出的模块对象。

除了基本暴露与引用，shared配置用来声明共享依赖，比如react、react-dom。Webpack会为这些库生成共享作用域，确保不同应用加载同一版本React时只实例化一次，避免多副本导致的hooks报错。理解这三个配置是掌握模块联邦的基础。

基础配置示例

下面给出一个远程应用的最小化Webpack配置，它将./src/Button.js暴露为./Button。

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'remote_app',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/Button.js'
      },
      shared: { react: { singleton: true }, 'react-dom': { singleton: true } }
    })
  ]
};

对应的宿主应用在配置中声明远程地址，之后便可以像引入本地模块一样使用它。

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'host_app',
      remotes: {
        remote_app: 'remote_app@https://ipipp.com/remoteEntry.js'
      },
      shared: { react: { singleton: true }, 'react-dom': { singleton: true } }
    })
  ]
};

在微前端中的落地方式

传统微前端方案如iframe隔离彻底但通信繁琐，qiankun类框架基于路由劫持与HTML解析，需要处理JS沙箱和样式隔离。模块联邦则从模块层面打通，组件级集成体验更接近单应用开发。对于追求体验一致、团队自治的中后台系统，它显著降低了集成成本。

实际落地时，通常把基座作为宿主，各业务线作为远程。基座只负责布局与权限，具体页面由远程提供。当某个业务线更新了暴露的组件，基座无需重新构建，用户刷新即可拿到最新逻辑，实现真正独立的持续交付。

动态远程加载的注意点

远程地址如果写死在配置里，部署环境切换会比较麻烦。可以通过运行时变量注入远程映射，在应用启动前动态设置__webpack_init_sharing__与远程url。这样测试、生产环境只需改html中的全局变量。

// 在宿主入口顶部动态注册远程
__webpack_init_sharing__('default');
const container = window.remote_app = await import('remote_app/Button');
const Button = container.default || container.Button;

需要留意的是，动态加载意味着网络失败时要有限流与兜底，否则白屏会影响整体可用性。建议在宿主侧封装一个带超时与错误边界的远程组件包装器。

优缺点与适用边界

模块联邦的优势在于免发布联调、细粒度共享、构建解耦。但它对Webpack版本有要求，且调试时调用栈跨应用，定位问题比单仓库稍复杂。另外shared版本协商在依赖树差异过大时可能产生冗余加载。

如果团队仍在使用Webpack 4或更早构建工具，需要先升级才能使用。对于极度异构的技术栈，比如一方用Vue一方用React，模块联邦能共享运行时代码，但UI组件无法直接复用，此时更适合用Web Components做桥接。

小结对比

总体来看，模块联邦为JavaScript微前端提供了一条更轻量、更原生的路径。从理解remote、expose、shared三个配置出发，团队可以快速搭建起独立部署又无缝协作的前端架构。

Module_Federation微前端Webpack修改时间：2026-08-03 23:06:30