您无需向用户分发超出必要的代码，因此请拆分软件包，确保这种情况永远不会发生！
借助 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 的代码很少，这就是“正在加载”旋转图标只显示一小段时间的原因。较大的组件可能需要更长时间才能加载完毕，尤其是在网络连接不佳的情况下。
为了更好地演示此功能的运作方式，请执行以下操作：
- 如需预览网站，请按 View App（查看应用）。然后按 Fullscreen（全屏）
。 - 按 `Control+Shift+J`（在 Mac 上为 `Command+Option+J`）打开 DevTools。
- 点击网络标签页。
- 点击节流下拉菜单，该菜单默认设置为不节流。选择快速 3G。
- 点击应用中的 Click Me 按钮。
现在，加载指示器将显示更长时间。请注意，构成 AvatarComponent 的所有代码是如何作为单独的分块提取的。
暂停多个组件
Suspense 的另一个功能是，您可以暂停多个组件的加载，即使它们都是延迟加载的组件。
例如：
import React, { lazy, Suspense } from 'react';
const AvatarComponent = lazy(() => import('./AvatarComponent'));
const InfoComponent = lazy(() => import('./InfoComponent'));
const MoreInfoComponent = lazy(() => import('./MoreInfoComponent'));
const renderLoader = () => <p>Loading</p>;
const DetailsComponent = () => (
<Suspense fallback={renderLoader()}>
<AvatarComponent />
<InfoComponent />
<MoreInfoComponent />
</Suspense>
)
这是一种非常有用的方法，可延迟多个组件的渲染，同时仅显示单个加载状态。所有组件都提取完毕后，用户会同时看到所有组件。
您可以通过以下嵌入代码查看：
如果不这样做，就很容易遇到分阶段加载问题，即界面的不同部分会依次加载，每个部分都有自己的加载指示器。这可能会导致用户体验更不舒服。
处理加载失败
借助 Suspense，您可以在后台发出网络请求时显示临时加载状态。但是，如果这些网络请求因某种原因而失败，该怎么办？您可能处于离线状态，或者您的 Web 应用可能正在尝试延迟加载已过期的版本化网址，该网址在服务器重新部署后已不再可用。
React 有一个标准模式来妥善处理此类加载失败：使用错误边界。如文档中所述，如果任何 React 组件实现了生命周期方法 static getDerivedStateFromError() 或 componentDidCatch()（或二者兼有），则可以用作错误边界。
如需检测和处理延迟加载失败，您可以使用充当错误边界的父级组件封装 Suspense 组件。在错误边界的 render() 方法内，如果没有错误，您可以按原样呈现子项；如果出现问题，则可以呈现自定义错误消息：
import React, { lazy, Suspense } from 'react';
const AvatarComponent = lazy(() => import('./AvatarComponent'));
const InfoComponent = lazy(() => import('./InfoComponent'));
const MoreInfoComponent = lazy(() => import('./MoreInfoComponent'));
const renderLoader = () => <p>Loading</p>;
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = {hasError: false};
}
static getDerivedStateFromError(error) {
return {hasError: true};
}
render() {
if (this.state.hasError) {
return <p>Loading failed! Please reload.</p>;
}
return this.props.children;
}
}
const DetailsComponent = () => (
<ErrorBoundary>
<Suspense fallback={renderLoader()}>
<AvatarComponent />
<InfoComponent />
<MoreInfoComponent />
</Suspense>
</ErrorBoundary>
)
总结
如果您不确定从哪里开始对 React 应用应用代码分块，请按以下步骤操作：
- 从路线一级开始。路由是识别应用中可拆分点的最简单方法。React 文档介绍了如何将
Suspense与react-router搭配使用。 - 确定您网站上页面中仅在特定用户互动（例如点击按钮）时呈现的所有大型组件。拆分这些组件可最大限度地减少 JavaScript 载荷。
- 考虑拆分屏幕外且对用户不重要的所有其他内容。