使用Webpack Federation Plugin时为何重复加载React？

核心结论 #

你的思路没问题——核心项目不需要作为壳应用，它可以单纯作为共享依赖的提供者。React重复加载的问题，本质是Module Federation的共享配置和加载顺序没做对。

具体修正步骤 #

1. 调整 reactcore 的 Webpack 配置 #

reactcore 作为共享依赖的提供者，重点是把需要共享的依赖标记为单例，并且确保这些依赖被提前注册：

// reactcore/webpack.config.js
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  // 其他基础配置...
  plugins: [
    new ModuleFederationPlugin({
      name: 'reactcore', // 远程模块的唯一标识
      filename: 'remoteEntry.js', // 输出的注册文件
      exposes: {}, // 不需要暴露组件，只提供共享依赖
      shared: {
        react: {
          singleton: true, // 强制整个页面只有一个React实例
          eager: true, // 提前初始化共享模块，避免延迟加载导致的重复实例
          requiredVersion: '^18.2.0' // 统一依赖版本，必须和所有widget保持一致
        },
        'react-dom': {
          singleton: true,
          eager: true,
          requiredVersion: '^18.2.0'
        },
        '@mui/material': {
          singleton: true,
          eager: true,
          requiredVersion: '^5.14.0'
        }
        // 其他需要共享的依赖同理配置
      }
    })
  ]
};

2. 调整每个 mpwidget 的 Webpack 配置 #

每个工具类组件需要明确从 reactcore 拉取共享依赖，避免本地打包重复代码：

// mpwidgets/xxx/webpack.config.js
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  // 其他基础配置...
  plugins: [
    new ModuleFederationPlugin({
      name: 'mpwidget1', // 每个widget的唯一标识
      filename: 'widgetEntry.js', // 组件的输出入口文件
      exposes: {
        './Widget': './src/Widget' // 暴露你的工具组件
      },
      remotes: {
        // 指向reactcore的注册文件地址
        reactcore: 'reactcore@http://your-reactcore-deploy-url/remoteEntry.js'
      },
      shared: {
        react: {
          singleton: true,
          requiredVersion: '^18.2.0',
          import: false // 禁止本地打包React，强制从reactcore获取
        },
        'react-dom': {
          singleton: true,
          requiredVersion: '^18.2.0',
          import: false
        },
        '@mui/material': {
          singleton: true,
          requiredVersion: '^5.14.0',
          import: false
        }
      }
    })
  ]
};

3. 严格控制加载顺序 #

在页面中必须先加载 reactcore 的 remoteEntry.js，再加载各个 mpwidget 的脚本。比如：

<!-- 先加载核心依赖注册文件 -->
<script src="http://your-reactcore-deploy-url/remoteEntry.js"></script>
<!-- 再加载工具组件脚本 -->
<script src="http://your-widgets-deploy-url/mpwidget1/widgetEntry.js"></script>
<script src="http://your-widgets-deploy-url/mpwidget2/widgetEntry.js"></script>

如果加载顺序颠倒，widget会因为找不到已注册的共享依赖，自动打包本地版本，导致重复加载。

额外排查建议 #

• 用浏览器 Network 面板搜索 react，查看是否有多个不同的chunk加载了React代码；
• 使用 webpack-bundle-analyzer 分析widget的打包产物，确认React、MUI等依赖是否被排除在打包结果外；
• 确保所有项目的共享依赖版本完全匹配，版本不一致会被webpack判定为不同依赖，触发重复打包。

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