动态加载React组件

几个月前，我还在客户工作中遇到了一个有趣的问题，而且我没有看到太多的文档方法。我们所做的是：

1. 各个插件将是单独的Webpack项目，我们为它们提供模板或生成项目模板的CLI工具。

2. 在这个项目中，我们

   externals

   为核心应用程序中已使用的共享供应商库定义Webpack ：React，Redux等。这告诉插件不将其包含在捆绑软件中，而是从

   window

   我们在核心应用程序中设置的变量中获取它们。我知道，听起来很烂，但是比让所有插件重新包含1000个共享模块要好得多。

3. 重复使用的这一概念

   external

   ，核心应用程序还通过窗口对象向插件提供了一些服务。最重要的一种

   PluginService.register()

   方法是插件初始化时必须调用的方法。我们在这里反转控制：该插件负责向核心应用程序说“嗨，我在这里，这是我的主要输出（如果是UI插件，则是Component）”。

4. 核心应用程序具有一个PluginCache类/模块，该类/模块仅保存已加载插件的缓存（pluginId->导出的插件，fn，class或其他内容）。如果某些代码需要插件来呈现，它将向该缓存请求。这样的好处是允许在插件未正确加载时返回

   <Loading />

   或

   <Error />

   组件，依此类推。

5. 对于插件加载，此PluginService / Manager加载插件配置（我应该加载哪个插件？），然后创建动态注入的

   script

   标签来加载每个插件包。捆绑包完成后，将

   register

   调用步骤3中描述的调用，并且步骤4中的缓存将具有该组件。

6. 与其尝试直接从组件中加载插件，不如从缓存中请求插件。

这是一个非常高层次的概述，与当时的需求密切相关（这是一个类似于仪表板的应用程序，用户可以在其中动态添加/删除面板，而所有这些小部件都作为插件实现）。

根据您的情况，您甚至可以用

<Provider store={ theCoreStore }

祝您好运，希望对您有所帮助！