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

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确定要加载模块中的哪个组件，以及它期望的对象类型。从文档：

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

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

然后惰性组件应该在Suspense组件内部呈现，这允许我们在等待惰性组件加载时显示一些后备内容（例如加载指示器）。

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

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

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

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

资源：

• 反应代码拆分
• 进出口
• Promise.prototype.then（then返回一个承诺）

Answer 2

You can use Suspense for waiting both of them. There are two bundles, but you can wait of loading both of them

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>
      </Switch>
    </Suspense>
  </Router>
);