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

司空玲玲提问于 2026-03-12 18:44:20 阅读 62

前端

我在用 qiankun 搭建微前端项目，主应用和子应用都用了 React，但发现子应用会重新加载一份 React，导致 bundle 体积变大，还报了 React 重复加载的警告。

我尝试在 webpack 配置里把 React 设为 external，但子应用直接报 React is not defined。主应用确实已经加载了 React，该怎么让子应用复用主应用的 React 呢？

目前主应用的 webpack 配置里加了：

externals: {
  react: 'React',
  'react-dom': 'ReactDOM'
}

子应用也配了同样的 externals，但运行就出错，是不是漏了什么关键步骤？

共享依赖

我来解答赞 15 收藏

反馈

1 条解答

打工人爱娜 Lv1

问题在于主应用虽然配了 external，但全局变量还没加载。子应用找不到 React。

两个解法：

一、在主应用 index.html 里先用 script 标签加载 React（最简单）：

二、用 qiankun 的 sharedScope（推荐）：

主应用 main.js 配置：
import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
{
name: '子应用名',
entry: '//localhost:3001',
container: '#container',
activeRule: '/app',
shared: {
react: { singleton: true, eager: true },
'react-dom': { singleton: true, eager: true }
}
}
]);

start();

子应用 webpack 配置 externals 保持不变，同时在 package.json 里声明 react 和 react-dom 为 peerDependencies。

第一种方式最直接，先试试看。

2026-03-12 19:00