使用 React.lazy 和 Suspense 进行代码拆分

您绝不需要向用户提供超出必要范围的代码，因此请拆分您的软件包，以确保这种情况永远不会发生！

Houssein Djirdeh
Houssein Djirdeh
X GitHub 首页
Jeff Posnick

借助 React.lazy 方法，您可以轻松使用动态导入在组件级别对 React 应用进行代码拆分。

import React, { lazy } from 'react';

const AvatarComponent = lazy(() => import('./AvatarComponent'));

const DetailsComponent = () => (
  <div>
    <AvatarComponent />
  </div>
)

为什么搜索渠道报告非常实用？

大型 React 应用通常包含许多组件、实用方法和第三方库。如果不努力尝试仅在需要时加载应用的不同部分，那么用户在加载第一个页面后，就会收到一个包含大量 JavaScript 的大型软件包。这可能会严重影响网页性能。

React.lazy 函数提供了一种内置方式，可将应用中的组件分离为单独的 JavaScript 代码块，而无需进行大量准备工作。然后，您可以将其与 Suspense 组件搭配使用，以处理加载状态。

悬疑

向用户传送大型 JavaScript 载荷的问题在于，网页完成加载所需的时间会很长，尤其是在设备和网络连接较弱的情况下。因此，代码拆分和延迟加载非常有用。

不过，当通过网络提取代码拆分组件时，用户始终会遇到轻微的延迟，因此显示有用的加载状态非常重要。将 React.lazy 与 Suspense 组件搭配使用有助于解决此问题。

import React, { lazy, Suspense } from 'react';

const AvatarComponent = lazy(() => import('./AvatarComponent'));

const renderLoader = () => <p>Loading</p>;

const DetailsComponent = () => (
  <Suspense fallback={renderLoader()}>
    <AvatarComponent />
  </Suspense>
)

Suspense 接受 fallback 组件，该组件允许您将任何 React 组件显示为加载状态。以下示例展示了此功能的运作方式。 仅当点击按钮时才会渲染头像，然后发出请求以检索暂停的 AvatarComponent 所需的代码。与此同时，系统会显示后备加载组件。

在此示例中，构成 AvatarComponent 的代码很小，因此加载旋转图标仅显示很短的时间。较大的组件可能需要更长时间才能加载，尤其是在网络连接较弱的情况下。

为了更好地演示其运作方式：

  • 如需预览网站，请按查看应用。然后按全屏图标 全屏。
  • 按 `Control+Shift+J`（在 Mac 上，按 `Command+Option+J`）打开开发者工具。
  • 点击网络标签页。
  • 点击限制下拉菜单（默认设置为无限制）。选择快速 3G。
  • 点击应用中的 Click Me 按钮。

现在，加载指示器会显示更长时间。请注意，构成 AvatarComponent 的所有代码是如何作为单独的分块提取的。