React.lazy与Suspence实现延迟加载

Posted 2022-11-04 橘猫吃不胖～

React.lazy与Suspence实现延迟加载

• 1 代码分割
• 2 React.Lazy
• 3 Suspense
• 4 备注

1 代码分割

代码分割能够创建多个包并在运行时动态加载，它能够帮助我们“懒加载”当前用户所需要的内容，能够显著地提高应用性能。

尽管并没有减少应用整体的代码体积，但可以避免加载用户永远不需要的代码，并在初始加载的时候减少所需加载的代码量。

2 React.Lazy

React.Lazy()可以通过代码分割延迟加载组件，它能让我们像渲染常规组件一样动态引入组件。

它接受一个函数，这个函数需要动态调用import()。它必须返回一个Promise，该Promise需要resolve一个default export的React组件。

使用之前，我们是这样引入组件的：

import BComponent from "./BComponent";

使用之后，我们就可以这样引入组件：

const BComponent = React.lazy(() => import("./BComponent"));

3 Suspense

Suspense是一个延迟函数所必须的组件，通常用来包裹住延迟加载组件。多个延迟加载的组件可被包在一个suspense组件中。它提供了一个fallback属性，用来在组件的延迟加载过程中展示我们想展示的react元素，比如loading状态等。

当我们使用React.Lazy()引入一个组件之后，就应该搭配Suspense来使用，具体用法如下：

import React from "react";
const BComponent = React.lazy(() => import("./BComponent"));
const CComponent = React.lazy(() => import("./CComponent"));

const AComponent = () => 
    return (
        <>
            <React.Suspense fallback=<div>loading...</div>>
                <BComponent />
                <CComponent />
            </React.Suspense>
        </>
    )


export default AComponent;

4 备注

React.lazy和Suspense在服务端渲染中尚不可用，如果想在服务端渲染中使用代码分割，仍推荐使用Loadable组件。

什么是服务端渲染？

服务器端渲染是一种在自己的服务器上加载网站的javascript的方法。当用户或搜索引擎网络爬虫请求页面时，内容读取为静态html页面。