webpack module federation场景下共享单例依赖更新方案咨询

存在无需原子发布所有关联模块的可行方案，核心思路是共享依赖多版本并行+流量灰度切流+渐进式迁移，完全兼容现有持续部署流程，不需要强制全量同步上线，已经在多个大厂生产环境落地验证。

方案核心设计逻辑 #

利用模块联邦shared配置的版本匹配特性：仅当远程模块声明的依赖版本范围和宿主提供的版本匹配时，才会复用共享单例；版本不匹配时会自动加载远程模块自带的依赖版本，两个版本完全隔离运行，不会出现冲突。

生产环境完整发布流程 #

• 第一步：宿主应用（Shell）首先做兼容改造，同时声明两个版本的React为共享依赖，临时关闭单例强制限制，不对依赖版本做强制兜底
• 第二步：灰度发布改造后的宿主应用，先切10%流量验证双版本加载逻辑正常，确认无资源冲突、运行时报错后逐步提升灰度比例到100%
• 第三步：业务模块（Remote）分批独立升级React版本，升级完成后单独发布，不需要和其他模块同步。此时访问新模块的用户会自动加载新版React，访问旧模块的用户加载旧版React，二者互不影响
• 第四步：所有业务模块都完成升级后，修改宿主配置，移除旧版React的共享声明，重新开启单例强制，发布宿主完成整个升级流程
• 第五步：清理所有模块临时加的多版本兼容配置，回归正常单例共享模式，减少冗余资源加载

迁移期间要求各业务模块仅对外导出自身封装的页面/服务，禁止跨模块传递React组件实例、hook，避免跨版本调用出现异常。

核心配置示例 #

改造阶段宿主（Shell）的ModuleFederationPlugin配置 #

// webpack.config.js 宿主应用改造阶段配置
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'shell',
      remotes: {
        // 此处保留原有远程模块声明
      },
      shared: {
        // 旧版React 兼容现有未升级的远程模块
        'react': {
          singleton: false, // 临时关闭单例强制，允许多版本共存
          requiredVersion: '^17.0.0',
        },
        // 新版React 给已经升级的远程模块用
        'react@18': {
          import: 'react', // 实际导入的是项目里安装的react 18
          shareKey: 'react',
          shareScope: 'default',
          singleton: false,
          requiredVersion: '^18.0.0',
        },
        'react-dom': {
          singleton: false,
          requiredVersion: '^17.0.0',
        },
        'react-dom@18': {
          import: 'react-dom',
          shareKey: 'react-dom',
          singleton: false,
          requiredVersion: '^18.0.0',
        }
      }
    })
  ]
}

升级后的远程模块（Remote）配置 #

// 已经升级到React 18的业务模块webpack配置
new ModuleFederationPlugin({
  name: 'order_service',
  exposes: {
    './OrderApp': './src/bootstrap'
  },
  shared: {
    react: {
      singleton: false,
      requiredVersion: '^18.0.0',
    },
    'react-dom': {
      singleton: false,
      requiredVersion: '^18.0.0',
    }
  }
})

全量升级完成后宿主的最终配置 #

// 所有模块都升级到React 18后，改回单例模式节省资源
new ModuleFederationPlugin({
  name: 'shell',
  shared: {
    react: {
      singleton: true,
      requiredVersion: '^18.0.0',
      eager: true
    },
    'react-dom': {
      singleton: true,
      requiredVersion: '^18.0.0',
      eager: true
    }
  }
})

风险兜底机制 #

• 发布前在预发环境验证不同版本模块混合加载的场景，确认样式、生命周期不存在冲突
• 宿主应用接入灰度开关，可随时切回旧版本的共享配置，无需回滚所有业务模块
• 新增运行时监控，统计不同版本React的加载次数、报错率，出现异常自动暂停切流

内容的提问来源于stack exchange，提问作者rubixibuc