如何在同一时间懒惰加载多个组件

Question

我有2个组件，我想用懒惰加载的方式加载所有组件，例如

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

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

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

我也不想创建一个包含上述两个组件的单一组件，因为我想为这两个组件创建一个单独的路径。

我曾试着做过这样的事https:/codesandbox.ioseager-raman-mdqzc?file=srcApp.js。

请谁能给我解释一下，这种类型的功能是可能的，如果是，那么如何，我做错了什么？

Answer 1

你可以使用Suspense来等待它们两个。有两个bundles，但你可以等待加载它们两个。

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>
);

Answer 2

从文档中。

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

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

资源。

• React代码分割
• 进出口
• Promise.prototype.then (then 返回一个承诺)