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

Question

我有 2 个组件，我想使用延迟加载来加载所有组件，例如

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

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

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

我也不想创建包含上述两个组件的单个组件，因为我想要为它们两个单独的路由

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

请问有人会解释我这种功能是否可能，如果是，那么我做错了什么以及做错了什么

Answer 1

代码拆分器中可能有一些调整选项可以更好地完成您想要实现的目标。但是，如果您不想弄乱这些(或者因为您使用的是预设配置而无法更改它们)，那么也许您可以将模块组合到一个文件中，然后延迟加载该“组合模块”。
为此，我们首先需要知道 lazy确定要加载模块中的哪些组件，以及它期望的对象类型。从文档:

The React.lazy function lets you render a dynamic import as a regular component.

React.lazy takes a function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component.

The lazy component should then be rendered inside a Suspense component, which allows us to show some fallback content (such as a loading indicator) while we’re waiting for the lazy component to load.

You can place the Suspense component anywhere above the lazy component. You can even wrap multiple lazy components with a single Suspense component.

所以据此，如果你想使用 lazy()包装模块，那么你必须有一个组件作为 default模块的属性。因此，它不允许您自动使用使用命名导出作为组件的模块。但是，您可以轻松地做出将命名导出转换为默认导出的 promise ，并将其包装在惰性中:

// 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})))

请注意，我们必须调用 import在传递给 lazy 的初始化函数内部，否则导入将立即开始。 lazy 的一部分的好处是可以让你等到父组件在加载之前渲染惰性组件。但是， import()应该缓存第一次导入的结果，并且只加载一次代码。
在初始化函数中，我们使用 then转换 import() 的结果来自 Promise({A: <Component>, B: <Component>}) 之类的东西懒惰对初始化函数的期望: Promise({default: <Component>})现在我们有两个惰性组件，它们都来自一个模块文件。
资源:

React code splitting

import/export

Promise.prototype.then (then 返回一个 promise )