Webpack下完全动态路径dynamic import实现方案咨询（CRA环境）

方案1：运行时动态加载UMD格式组件（无需eject，兼容性更好） #

核心逻辑是将需要动态加载的外部组件提前打包为UMD格式并托管到云端，运行时通过动态插入script标签加载资源，再封装为React.lazy支持的Promise结构，绕过webpack构建时的静态路径限制。
示例代码如下：

function loadDynamicComponent(componentsPath, componentName) {
  return React.lazy(() => new Promise((resolve) => {
    const scriptUrl = `${componentsPath}/${componentName}.umd.js`;
    // 避免重复加载已引入的组件
    if (window[componentName]) {
      return resolve({ default: window[componentName] });
    }
    const script = document.createElement('script');
    script.src = scriptUrl;
    script.onload = () => {
      // UMD格式组件会默认挂载到window对象上，挂载字段和组件名一致
      resolve({ default: window[componentName] });
    };
    script.onerror = () => {
      resolve({ default: () => <div>No Component found by the name: {componentName}</div> });
    };
    document.body.appendChild(script);
  }));
}

方案2：eject后修改webpack配置支持远程ESM导入 #

如果要保留import()的写法，可通过弹出CRA配置修改webpack规则实现：

1. 先提交所有本地代码，执行npm run eject弹出配置，该操作不可逆
2. 打开config/webpack.config.js，新增以下配置项：

module.exports = {
  // 保留原有所有配置项，新增以下内容
  experiments: {
    outputModule: true,
    topLevelAwait: true,
  },
  output: {
    ...config.output,
    module: true,
    publicPath: 'auto',
  },
  externalsType: 'module',
}

3. 配置完成后即可直接使用完全动态路径导入ESM格式的外部组件：

Component = React.lazy(() => import(`${componentsPath}/${componentName}.js`));

通用注意事项 #

• 两种方案都要求外部组件的托管服务配置正确的CORS响应头，否则会被跨域规则拦截
• 打包外部组件时请将react、react-dom等公共依赖设置为external，避免和宿主项目依赖版本冲突导致运行时报错
• 方案2要求外部组件必须打包为ESM格式才能正常加载

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