微前端应用中如何避免重复加载相同版本的公共库？

你遇到的问题其实在微前端里非常典型，根本原因在于：每个子应用打包时默认把 React 打进了自己的 bundle，而运行时又各自独立初始化了一次，所以浏览器里会同时存在多个 React 实例，触发冲突。

原理是这样：微前端的“共享依赖”不是靠代码里写一句 window.__SHARED_REACT__ 就能自动生效的，它需要打包配置 + 运行时挂载 + 模块联邦策略三者配合。你现在的情况是只做了“运行时判断”，但没解决“打包时怎么不打进 React”这件事。

我给你一个能落地的方案，分三步走：

第一步：在所有子应用的构建配置里，把 React 标记为“外部依赖”，也就是打包时跳过它，不打包进去
比如你用的是 Webpack，可以在 webpack.config.js 里这么配：

module.exports = {

  // ...

  externals: {

    react: 'React',

    'react-dom': 'ReactDOM',

  },

};

如果是 Vite，对应配置是：

export default {

  build: {

    rollupOptions: {

      external: ['react', 'react-dom'],

      output: {

        globals: {

          react: 'React',

          'react-dom': 'ReactDOM',

        },

      },

    },

  },

};

这一步的作用是告诉打包器：“别把 React 打进你的包里，等运行时从全局变量里找”。

第二步：在宿主应用里，提前加载一次 React，并挂到 window 上，而且要确保挂的是全局可用的变量名（比如 React、ReactDOM），不是你随便起个 __SHARED_REACT__ 就完事：

宿主应用的 index.html 里（或者在入口 JS 的最开始）：

<script src="https://unpkg.com/react@18.2.0/umd/react.production.min.js"></script>

<script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js"></script>

或者用动态加载（推荐，可控性高点）：

// 主应用入口文件最顶部

function loadSharedReact() {

  return new Promise((resolve, reject) => {

    if (window.React && window.React.createElement) {

      resolve();

      return;

    }



    const script1 = document.createElement('script');

    script1.src = 'https://unpkg.com/react@18.2.0/umd/react.production.min.js';

    script1.onload = () => {

      const script2 = document.createElement('script');

      script2.src = 'https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js';

      script2.onload = () => resolve();

      script2.onerror = reject;

      document.head.appendChild(script2);

    };

    script1.onerror = reject;

    document.head.appendChild(script1);

  });

}



// 主应用初始化前先加载

loadSharedReact().then(() => {

  // 然后再启动主应用和子应用

  startMicroApp();

});

注意：这里用的是 window.React 和 window.ReactDOM 这种全局变量名，因为第一步 externals 配置里写的也是这个。

第三步：子应用里别再自己 import('react')，直接用 import React from 'react'，因为 Webpack/Vite 打包时已经把它当成 external 了，实际运行时会自动去 window.React 里取，不会重新发请求。

你之前写的 const reactVersion = window.__SHARED_REACT__ || import('react'); 这种写法是错的，因为 import('react') 是动态 import，它还是会触发网络请求——你得让打包器知道这是 external，而不是运行时自己手写判断。

再补充一个常见坑：如果你用的是模块联邦（比如 @module-federation），记得在 webpack.config.js 里声明 shared: ['react', 'react-dom']，而且 singleton: true，这样能强制所有子应用共用同一个实例：

new ModuleFederationPlugin({

  name: 'app1',

  filename: 'remoteEntry.js',

  exposes: {

    './Bootstrap': './src/bootstrap',

  },

  shared: {

    react: { singleton: true, requiredVersion: '^18.2.0' },

    'react-dom': { singleton: true, requiredVersion: '^18.2.0' },

  },

});

不过哪怕用了模块联邦，第一步 externals 的配置也不能少，否则子应用打包时还是可能把自己打包进去一份。

最后说个现实建议：别自己手写 script 标签引入 React，容易版本不一致、出问题。更稳妥的做法是用模块联邦的共享机制，或者用一个专门的“共享容器”子应用（比如叫 @micro/shared-lib）统一托管 React、React DOM、Ant Design 等大包，其他子应用通过动态 import 从它那拿。

我之前带团队落地微前端时，就吃过这个亏：子应用里有人写了 import React from 'react'，但忘了 externals，打包后 React 体积占了 120KB，上线后一个页面加载 5 个子应用，光 React 就重复加载了 5 次……后来看网络面板才发现问题。

你按这个流程配一遍，应该就能解决重复加载的问题。如果还有问题，把你子应用的 package.json 和 webpack.config.js（或 vite.config.ts）贴出来，我帮你看看具体哪块没对齐。

这个问题的核心在于如何让子应用复用宿主应用中已经加载的公共依赖，比如 React。建议改成通过全局变量显式共享依赖，而不是动态导入。

首先，在宿主应用中提前加载 React，并将其挂载到全局对象上，比如 window.__SHARED_REACT__。代码可以这样写：

// 宿主应用入口

import React from 'react';

import ReactDOM from 'react-dom';



window.__SHARED_REACT__ = React;

window.__SHARED_REACT_DOM__ = ReactDOM;

接下来，在子应用的入口文件中，判断全局变量是否存在，如果存在就直接使用，而不是重新导入。可以改成这样：

// 子应用入口

const React = window.__SHARED_REACT__ || await import('react');

const ReactDOM = window.__SHARED_REACT_DOM__ || await import('react-dom');



// 确保 React 和 ReactDOM 是从全局获取的

if (!React || !ReactDOM) {

  throw new Error('Shared React or ReactDOM is not available');

}



// 继续正常的渲染逻辑

ReactDOM.render(React.createElement('div', null, 'Hello Micro Frontend'), document.getElementById('root'));

需要注意的是，这种方式要求宿主应用和子应用的 React 版本完全一致，否则可能会导致奇怪的问题。建议在构建时统一管理公共依赖的版本，或者通过 package.json 的 resolutions 字段锁定版本。

另外，如果你用的是 Webpack，可以通过 externals 配置避免子应用打包 React。比如：

// 子应用的 Webpack 配置

module.exports = {

  externals: {

    react: 'window.__SHARED_REACT__',

    'react-dom': 'window.__SHARED_REACT_DOM__',

  },

};

这样一来，子应用在运行时会直接使用宿主应用提供的 React 和 ReactDOM，不会触发额外的网络请求。记得检查网络面板确认是否真的去重成功了，有时候缓存策略也会导致意外情况。

最后吐槽一句，微前端架构确实灵活，但这些依赖管理的问题真是让人头大，尤其是多个团队协作的时候，版本对齐简直是个噩梦。