微前端中如何正确共享 React 依赖避免重复加载？

A. 若彤提问于 2026-03-24 03:18:23 阅读 20

前端

我在用 qiankun 搭微前端，主应用和子应用都用了 React，结果页面一加载就报 React 重复初始化的错。我试过在 webpack 里配 externals，但子应用单独运行时又找不到 React 了，这咋整？

这是子应用的入口 HTML，现在每次都会加载一份 React：

<!DOCTYPE html>
<html>
<head>
  <title>Sub App</title>
</head>
<body>
  <div id="root"></div>
  <script src="//localhost:8080/react.js"></script>
  <script src="//localhost:8080/react-dom.js"></script>
  <script src="/static/js/main.js"></script>
</body>
</html>

我来解答赞 6 收藏

反馈

1 条解答

Mc.莉娜 Lv1

遇到这种问题，推荐的做法是在主应用中提供 React 和 ReactDOM 的全局变量，然后在子应用中通过 externals 配置来引用这些全局变量，而不是自己再加载一次。这样可以确保主应用和子应用使用的是同一个 React 实例。

首先，在主应用的入口文件中，你需要确保 React 和 ReactDOM 被挂载到 window 对象上。假设你已经在主应用中引入了 React 和 ReactDOM，那么它们应该已经在全局作用域中了。

然后，在子应用的 webpack 配置中，你需要添加 externals 配置来引用这些全局变量。配置如下：

pre class="pure-highlightjs line-numbers">

module.exports = {

  // 其他配置...

  externals: {

    react: 'React',

    'react-dom': 'ReactDOM',

  },

};

同时，你需要从子应用的入口 HTML 中移除对 React 和 ReactDOM 的直接引用，因为你不再需要它们在子应用内部单独加载了。修改后的子应用入口 HTML 如下：

<!DOCTYPE html>

<html>

<head>

  <title>Sub App</title>

</head>

<body>

  <div id="root"></div>

  <script src="/static/js/main.js"></script>

</body>

</html>

这样配置后，子应用在运行时会使用主应用提供的 React 和 ReactDOM，从而避免重复加载的问题。记得在开发环境中测试这个配置，确保一切正常。

2026-03-24 04:00