如何在 React 中同时延迟加载多个组件答案

【问题标题】：How to lazy load multiple components at a same time in React如何在 React 中同时延迟加载多个组件
【发布时间】：2020-12-09 15:20:59
【问题描述】：

const {A, B, C, D} = React.lazy(() => import("../test"));

从一个文件夹中解构多个组件并将惰性应用于所有组件？这可能吗？

【问题讨论】：

你试过了吗？

标签： reactjs lazy-evaluation

【解决方案1】：

你说的具体是不可能的。

理论上可以解构导入，但您无法在传递给lazy 的闭包之外与其交互，因为它尚不可用。请记住，dynamic imports 不是 React 的功能，而是浏览器。您可以解构动态导入的模块，但这样做需要使用await。

const {A, B} = await import('your/module');

在 React 的上下文中，这将停止文件中的所有执行，这显然不是我们想要的。

为了使其正常运行，您需要在 lazy 回调中进行解构。

我无法对此进行测试，但理论上它应该可以工作：

const ComponentA = React.lazy(() => {
    const {A} = await import("../test");
    return A
})

const ComponentB = React.lazy(() => {
    const {B} = await import("../test");
    return B
})

【讨论】：