React项目：如何在src目录代码执行前完成远程配置请求？

问题背景 #

现有React项目无法大面积修改，启动前必须先获取远程配置，且配置需在src目录代码（如src/consts/appConfig.js）加载前完成赋值。当前index.html中的异步配置请求因执行时机问题，导致src/consts/appConfig.js加载时window.appConfig尚未赋值，导出的仍是硬编码的旧配置。

现有代码片段：
src/consts/appConfig.js

const newConfig = window.appConfig || {};
const appConfig = Object.assign({/* 硬编码配置内容 */}, newConfig);
export default appConfig;

index.html中的配置请求脚本：

<script>
  const getConfig = async () => {
    try {
      return (await fetch("some url", {
        method: "GET",
        headers: {
          Accept: "application/json",
          "Content-type": "application/x-www-form-urlencoded",
        },
      })).json();
    } catch (err) {
      throw new Error(`Failed to load app configuration, error : ${err}`);
    }
  };
  (async () => {
    window.appConfig = await getConfig();
  })();
</script>

方案1：使用同步请求阻塞资源加载 #

将异步fetch改为同步XMLHttpRequest，确保配置请求完成后再加载后续的React bundle脚本。这种方式无需修改构建流程，但会阻塞浏览器渲染，影响首屏体验。

修改index.html中的脚本：

<script>
  function getConfig() {
    const xhr = new XMLHttpRequest();
    // 第三个参数设为false，启用同步请求
    xhr.open('GET', 'some url', false);
    xhr.setRequestHeader('Accept', 'application/json');
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    
    try {
      xhr.send();
      if (xhr.status >= 200 && xhr.status < 300) {
        return JSON.parse(xhr.responseText);
      } else {
        throw new Error(`Request failed with status ${xhr.status}`);
      }
    } catch (err) {
      throw new Error(`Failed to load app configuration, error : ${err}`);
    }
  }
  // 同步执行，确保window.appConfig在bundle加载前赋值完成
  window.appConfig = getConfig();
</script>

方案2：动态加载React Bundle #

移除index.html中直接引入的React bundle脚本，改为在配置请求完成后动态创建脚本标签加载bundle，避免异步请求的时序问题。

修改index.html：

1. 删除原有的bundle引入脚本（如<script src="/static/js/main.xxx.js"></script>）
2. 更新配置请求脚本：

<script>
  const getConfig = async () => {
    try {
      const response = await fetch("some url", {
        method: "GET",
        headers: {
          Accept: "application/json",
          "Content-type": "application/x-www-form-urlencoded",
        },
      });
      if (!response.ok) {
        throw new Error(`Request failed with status ${response.status}`);
      }
      return await response.json();
    } catch (err) {
      throw new Error(`Failed to load app configuration, error : ${err}`);
    }
  };

  (async () => {
    window.appConfig = await getConfig();
    // 配置加载完成后，动态创建脚本加载React bundle
    const bundleScript = document.createElement('script');
    bundleScript.src = '/static/js/main.xxx.js'; // 替换为实际的bundle路径
    bundleScript.async = true;
    document.body.appendChild(bundleScript);
  })();
</script>

方案3：修改配置文件为动态获取（允许修改src代码时使用） #

如果可以修改src/consts/appConfig.js，将静态导出改为动态函数或Promise，让后续代码等待配置加载完成后再执行。

修改src/consts/appConfig.js：

// 原硬编码配置
const hardcodedConfig = {/* 所有硬编码配置内容 */};

// 动态获取配置的异步函数
export const getAppConfig = async () => {
  // 优先使用window上已加载的配置
  if (window.appConfig) {
    return Object.assign({}, hardcodedConfig, window.appConfig);
  }
  // 也可以在这里直接发起请求（无需依赖index.html的脚本）
  try {
    const response = await fetch("some url", {
      method: "GET",
      headers: {
        Accept: "application/json",
        "Content-type": "application/x-www-form-urlencoded",
      },
    });
    const remoteConfig = await response.json();
    return Object.assign({}, hardcodedConfig, remoteConfig);
  } catch (err) {
    console.error('加载远程配置失败，使用硬编码配置', err);
    return hardcodedConfig;
  }
};

// 导出Promise兼容原有代码
export default new Promise(resolve => {
  getAppConfig().then(config => resolve(config));
});

修改index.js，等待配置加载完成后再渲染：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import appConfigPromise from './consts/appConfig';

appConfigPromise.then(appConfig => {
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(
    <React.StrictMode>
      <App config={appConfig} />
    </React.StrictMode>
  );
});

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