React：运行时加载组件

Question

我有一个组件在应用程序的不同位置弹出。 在弹出组件中，我有几个按其用法分组的子组件，这些子组件已经导入，静态。

然后我使用switch语句根据传入的prop 用法呈现不同的组件组。

这样做正常，但是switch语句（和导入）正在增长。

他们是否可以在运行时传递组件并让它们渲染。那么在任何时候弹出窗口中只有一组组件存在/实例化？只是试图取消switch语句和静态导入

伪代码

<renderPopup children={[ componentA, componentB ]} />

<renderPopup children={[ componentA, componentB, componentC ]} />

这是Webpack可以做的吗？但是更喜欢它是代码而不是配置？

子组件将具有静态导入等。

希望这是有道理的。

Answer 1

是的，在Webpack中有一些称为异步代码拆分的东西。

以下是文档：https://webpack.js.org/guides/code-splitting-async/#require-ensure-

基本上，您可以告诉Webpack在某个区域创建一个分割点，然后使用切割器技巧使这些模块仅在需要时加载。使用路由变得容易，因为react-router已经有了相关的处置，但是使用清单和注册表系统这样做并不太难。

Answer 2

这似乎是我应该做的事情

Dynamic System.import with webpack?

Webpacks System.import 似乎是答案，但如果还有其他方式请发布