惰性加载

在一般的应用编写中，对于组件的加载一般都是直接使用import Component from 'component_path';来完成的，这种加载方式拥有最快的组件加载速度和应用运行速度，但是在编译打包以后输出的 bundle 的体积会比较大，这在通过网络加载应用的时候用户体验会比较差。所以一般都会采用惰性加载来延迟一部分不常用组件的加载，来综合提升用户使用体验和网络加载速度。

React 提供了一个函数和一个组件来实现对于组件的惰性加载。

lazy，这个函数主要用于惰性加载组件，它接受一个函数作为参数，这个函数中需要动态的调用import并返回一个 Promise 类型对象，这个 Promise 对象的resolve结果需要返回一个组件。
Suspend，这个组件用于包裹惰性加载的组件，在组件正在被加载的时候提供比较优雅的降级措施。

lazy函数是比较容易理解和使用的，最常用的方法就是如以下示例中这样替代原来的import用法。

import { lazy } from 'react';

const FormComponent = lazy(() => import('./components/Form'));

Suspend组件的使用要更加简单一些，它只接受一个fallback属性，Suspend组件在其包裹的惰性加载组件尚未加载完毕的时候，会渲染fallback属性指定的组件来作为降级代替，在大部分应用中会选择加载提示来作为降级组件。例如像以下这样使用。

const TaskForm = lazy(() => import("./components/TaskForm"));
const TaskInfo = lazy(() => import("./components/TaskInfo"));

function TaskList(props) {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <TaskInfo />
        <TaskForm />
      </Suspense>
    </div>
  );
}

如示例中所示，Suspend组件不仅可以只包裹单一的一个惰性加载的组件，还可以包裹多个惰性加载的组件。在包裹多个惰性加载的组件时，Suspend组件回等待其包裹的所有惰性加载组件都加载完毕以后才进行正常内容的渲染，否则都将一直渲染降级组件。

Suspend组件还可以与 React Router v6 组合使用，只要包裹住用于定义路由结构的Routes组件，就可以支持整个路由结构中的所有惰性加载路由组件的降级渲染。

Live with React

惰性加载