是否可以从 url 延迟加载 React 中的一组组件/模块？

Question

我正在构建一个 React 应用程序，它将支持第三方开发人员编写他们自己的组件，我们将对其进行测试，然后托管在我们公司的 CDN 上。我使用@loadable/component 动态加载模块，但我不知道如何让它适用于位于网址中的东西。

这是迄今为止我对延迟加载组件的了解。要获取的组件在 .json 文件中进行了概述。这个 .json 文件被解析，我编写的一个组件在该位置获取 index.js 并将该组件加载到应用程序中。

import moduleMetaData from "../thirdparty_modules"; //the json file outlining which modules to load
import loadable from "@loadable/component";
import React from "react";

const Module = (props) => {
    let id = props.id;
    let LoadedModule = null;

    if (!!moduleMetaData[id]) {
        let moduleLocation = moduleMetaData[id].location;

        LoadedModule = loadable(() => import(`${moduleLocation}`), {
            fallback: <div>Loading Module...</div>
        });
    }    
    return <LoadedModule/>;
}

export default Module;

这是正在使用的 .json 文件：

{
  "module1": {
    "name": "ModuleTest1",
    "location": "./main/module1/index"
  }
}

然后我在 App.js 中使用这个 <Module /> 组件将模块加载到我的应用程序中：

const App = () => {
    const GetModules = () => {
        let loadedModules = [];
        for(let key in moduleMetaData){
            loadedModules.push(<Module key={key} id={key}/>);
        }

        return loadedModules;
    }

    return (
        <AppContext.Provider
            value={{
                routes
            }}
        >
            <StylesProvider jss={jss} generateClassName={generateClassName}>
                <Provider store={store}>
                    <MuiPickersUtilsProvider utils={MomentUtils}>
                        <Auth>
                            <Router history={history}>
                                <FuseAuthorization>
                                    <FuseTheme>
                                        <FuseLayout/>
                                    </FuseTheme>
                                </FuseAuthorization>
                            </Router>
                        </Auth>
                    </MuiPickersUtilsProvider>

                    {/*LOAD MODULES*/}
                    {GetModules()}
                </Provider>
            </StylesProvider>
        </AppContext.Provider>
    );
};

export default App;

此代码允许我从/src 目录中延迟加载组件和模块，前提是每个模块的索引文件的路径都添加到thirdparty_modules.json。

我遇到的问题是，我无法让它适用于存储在外部 Web 服务器上的模块。如果我将 module1 目录从 ./src/main/module1 移动到我们的 CDN，示例地址为 https://our.cdn.net/module1，然后将我的 .json 位置更新为 https://our.cdn.net/module1/index，我会收到错误消息：

未处理的拒绝（错误）：找不到模块“https://our.cdn.net/module1/index”

如何让我的组件延迟加载从外部 url 加载，而不是从本地 /src 目录加载？

Answer 1

虽然您不能将它与 import 一起使用，但您仍然可以使用例如 Fetch API 检索数据并将其返回。

类似

        LoadedModule = loadable(() => fetch(moduleLocation).then(res => res.text())

应该可以正常工作。