SystemJS中global loading extras是什么？结合single-spa的使用指引

核心思路 #

利用SystemJS的global加载能力，将React、ReactDOM这类通用库提前在根应用中加载为全局变量，所有微应用直接复用全局实例，避免重复加载和版本冲突。

操作步骤 #

1. 引入SystemJS及全局加载插件 #

在根应用的入口HTML文件中，依次引入SystemJS核心库和global加载插件：

<!-- 引入SystemJS核心 -->
<script src="https://cdn.jsdelivr.net/npm/systemjs@6.14.0/dist/system.js"></script>
<!-- 引入global加载插件（对应SystemJS extras中的global功能） -->
<script src="https://cdn.jsdelivr.net/npm/systemjs@6.14.0/dist/extras/global.js"></script>

2. 配置SystemJS全局映射规则 #

在根应用的配置文件（如root-config.js）中，配置共享库的全局映射，告诉SystemJS当微应用import指定模块时，直接读取全局变量：

SystemJS.config({
  // 配置共享库的路径（提前加载的UMD包地址）
  paths: {
    'react': 'https://cdn.jsdelivr.net/npm/react@18.2.0/umd/react.production.min.js',
    'react-dom': 'https://cdn.jsdelivr.net/npm/react-dom@18.2.0/umd/react-dom.production.min.js'
  },
  // 配置模块与全局变量的映射
  meta: {
    'react': {
      // 指定该模块对应的全局变量名
      globals: { 'react': 'React' }
    },
    'react-dom': {
      globals: { 'react-dom': 'ReactDOM' }
    }
  },
  // 启用全局加载模式
  globalLoading: true
});

3. 提前加载共享库 #

在根应用初始化前，提前加载共享库并挂载到全局：

// 加载react和react-dom
Promise.all([
  SystemJS.import('react'),
  SystemJS.import('react-dom')
]).then(() => {
  // 库已加载完成，初始化single-spa根应用
  singleSpa.registerApplication({
    name: 'app1',
    app: () => SystemJS.import('@your-org/app1'),
    activeWhen: ['/app1']
  });
  // 启动single-spa
  singleSpa.start();
});

4. 微应用适配配置 #

每个微应用的Webpack配置中，将共享库设为外部依赖，避免打包时包含重复代码：

// 微应用webpack.config.js
module.exports = {
  // ...其他配置
  externals: {
    'react': 'React',
    'react-dom': 'ReactDOM'
  }
};

验证方法 #

• 打开浏览器开发者工具，查看Network面板，确认切换微应用时，react、react-dom不会重复加载
• 在Console中输入window.React和window.ReactDOM，能看到对应的实例对象
• 检查各微应用的bundle体积，确认未包含共享库代码

内容的提问来源于stack exchange，提问作者Quang Khải Đảm