如何同时延迟加载多个组件

How to lazy load multiple components at a same time(如何同时延迟加载多个组件)

问题描述

我有两个组件，我想使用类似于的延迟加载来加载所有组件

const A = lazy(() => import("../test/A")); 
const B = lazy(() => import("../test/B")); 

这将创建两个单独的捆绑包，并在需要时导入它们。

但是，我想创建一个包，当该包加载时，我应该能够同时使用上述两个组件。

我也不想创建包含上述两个组件的单个组件，因为我希望这两个组件都有单独的路径

我试着做这样的事情 https://codesandbox.io/s/eager-raman-mdqzc?file=/src/App.js

能否请某人向我解释一下这种功能是否可行，如果可以，那么我做错了什么以及我做错了什么

推荐答案

代码拆分器中可能有一些优化选项可以更好地实现您要尝试实现的目标。但是，如果您不想更改这些模块(或者因为您使用的是预设配置而无法更改它们)，那么您或许可以将这些模块组合到单个文件中，然后延迟加载该组合模块。

要做到这一点，我们首先需要知道lazy如何确定要加载模块中的哪个组件，以及它需要什么类型的对象。来自文档：

React.lazy函数允许您将动态导入呈现为常规组件。

React.lazy接受必须调用动态import()的函数。这必须返回Promise，该Promise解析为具有包含Reaction组件的默认导出的模块。

然后应在Suspense组件中呈现延迟组件，这允许我们在等待延迟组件加载时显示一些备用内容(如加载指示符)。

您可以将Suspense组件放在惰性组件之上的任何位置。您甚至可以用一个Suspense组件包装多个延迟组件。

因此，根据这一点，如果要使用lazy()包装模块，则必须有一个组件作为模块的default属性。因此，它不允许您自动使用将命名导出用作组件的模块。但是，您可以很容易地承诺将命名导出转换为缺省导出，并将其包装在LAZY：

中

// in comboModule.js:
export A from '../test/A'
export B from '../test/B'

// in the code that needs lazy modules
  const A = lazy(() => import('./comboModule').then((module) => ({default: module.A})))
  const B = lazy(() => import('./comboModule').then((module) => ({default: module.B})))

请注意，我们必须在传递给lazy的初始值设定项函数内调用import，否则导入将立即开始。lazy的部分好处是允许您等到父组件呈现延迟组件后再加载。但是，import()应该缓存第一次导入的结果，并且只加载一次代码。

在初始化器函数中，我们使用then将import()的结果从类似于Promise({A: <Component>, B: <Component>})转换为LAZY从初始化器函数期望的结果：Promise({default: <Component>})

现在我们有两个延迟组件，它们都来自一个模块文件。

资源：

• React code splitting
• import/export
• Promise.prototype.then(then返回承诺)

这篇关于如何同时延迟加载多个组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！