是否可以从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())

应该正常工作。