使用 React Lazy 和 React Suspense 进行代码拆分 React 路由器

GenAI LIVE! | 2025年6月4日

原帖@ Linguine Blog

JavaScript 速度很快。但在它真正变得快速之前，你的浏览器必须做很多工作才能为你的 JavaScript 应用程序提供服务。

JavaScript 的瓶颈之一是捆绑包的大小。

捆绑文件过大的问题在于 TTI（交互时间）的增加。

TTI 是用户实际能够使用应用程序或网站所需的时间的结果。

这是以时间来衡量的（毫秒、秒、分钟等）。

让我们看一下 CNN.com，并将网络速度限制为慢速 3G。

在每一行中，您可以看到正在下载和执行的 JavaScript 文件。

您还可以看到压缩后的大小、未压缩后的大小以及完成所需的时间。

如果我们打开他们的 cnn-footer-lib.min.js 文件，你会发现它没有任何被缩小的地方。

看起来该文件包含了该网站的很多逻辑。

React + Webpack = 1 个大 bundle 文件

99% 的时间里，当您使用 React 进行开发时，您将使用 Webpack 帮助您将所有内容捆绑到一个漂亮的包中。

Webpack 的核心是帮助开发过程中的热重加载，并将所有 JavaScript 文件捆绑到 1 个或多个 JS 文件中。

但是如果您正在开发 React，那么您通常的目标是单页应用程序，通常会有 1 个 JavaScript 包文件。

你的 React 文件并不大，实际上已经是最小的了。但是随着你安装 React 和其他打包输出的第三方库，文件会变得越来越大。

加载 500kb 的文件并不是一个好的用户体验。

为了提供更好的用户体验，我们可以采用一种称为动态导入的技术，也称为延迟加载。

也称为延迟加载。

React 组件延迟加载的好处

延迟加载我们的 React JS 文件的概念非常简单。

将最少的代码加载到将呈现页面的浏览器中。

在需要时加载额外的小块代码。

通过向浏览器加载更少的 JavaScript 代码，这将默认实现更好的性能和更好的 TTI 结果。

延迟加载的概念可能适用于任何 JavaScript 应用程序，但为了简单起见，我们将只讨论 React。

使用 React 进行代码拆分

在今天的例子中，我将从之前的一篇文章开始，该文章解释了如何开始使用 React router。

需要注意的一点是，之前的工作是使用 Create React App。

并且Create React App已经启用Webpack进行代码拆分。

现在的目标是利用代码拆分功能和延迟加载技术，并将其应用于 React 应用程序。

我想使用前面的示例的另一个原因是因为我将演示如何使用 React 进行路由基础代码拆分。

我只想在给定的时间加载呈现页面所需的 JavaScript 代码。

当用户浏览应用程序时，我将使用 React lazy 和 Suspense 来加载其他 React 文件。

使用 React Suspense 和 React lazy 进行延迟加载

在开始实现延迟加载代码之前，让我们快速回顾一下当前的应用程序。

以下是 cat 应用程序当前拥有的页面。

我有 3 页：

• 猫的列表
• 添加猫名的表格
• 一只猫的单一视图

让我们快速浏览一下当前的代码。

上面的文件是一个路由配置，它只是将路径附加到页面。

下一个文件是 App.js 文件，它获取路由配置文件并从中创建路由。

看第 31 至 44 行。

它通过 map 循环来创建 React 路由组件。

现在让我们快速浏览一下 React 开发者工具，看看它在初始渲染时是什么样子。

React 会渲染每个页面路由。即使我们目前不需要它。

让我们快速浏览一下 JS 文件的网络选项卡。

main.[name].chunk.js 文件是基本的 Webpack 初始代码。较大的文件是 React cat 应用程序。

我们的目标是减小初始负载，并在需要时分块加载。

让我们开始添加代码！

为 React 路由器添加延迟加载

我采取的第一步是删除route.js文件。

第二步是修改 App.js 文件。请仅查看突出显示的区域。

突出显示的区域表示代码略有更改。别担心，我会逐一解释。

步骤1：导入React router Switch组件

我更新App.js文件的第一步是在第 5 行。

我从 react router dom 导入了 Switch 组件。

Switch组件是一个独特的React组件，因为它的工作只是渲染单个路由组件。

你永远不会看到超过一个。

在上面的 React 开发者工具图片中，你可能看到了 3 条路由。让我们再次查看开发者工具，看看会渲染多少条路由。

当您浏览应用程序时，只会显示 1 条路线。

这很有用，因为不需要在特定时间使用额外的代码。

步骤 2：创建 React lazy 组件

在第 8 到第 10 行，我为每个页面创建了一个 React 懒惰组件。

React lazy 让您动态导入文件并将其转换为常规 React 组件。

步骤 3：使用 React Suspense 组件

在我使用 React 懒惰组件之前，我将添加React Suspense组件作为包装器。

React Suspense是 React 库提供的另一个组件。

React Suspense 组件可作为后备选项，让您的用户知道它正在加载。

这是由动态导入的工作方式决定的。

那么什么是动态导入？

如果我们看一下上面的图片，我给出了使用关键字import的两个不同示例。

尽管看上去一样，但事实并非如此。

第一个导入语句只能出现在文件顶部，并且只接受文字字符串。

这对于导入代码文件中所需的模块非常有用。

第二个导入示例使用括号，就像在函数中使用一样。

这让你的代码知道这将被异步处理，并将返回一个承诺。

由于动态导入是异步的，因此 React Suspense 可以发挥作用。

Suspense 将显示回退选项，直到承诺完成。

在这种情况下，承诺是 JavaScript 文件（React 文件）已被浏览器加载并执行。

当用户进入每个新页面时就会发生这种情况。

步骤 4：将我们的 React 惰性组件添加到路由

这是一个相当简单的步骤。

在我的 Switch 组件中，我定义了我的路线、路径和我想要使用的 React 惰性组件。

我还将属性传递给每个 React 惰性组件，例如我的猫列表或onSubmit处理程序函数。

结果

我所做的就是抓住整个应用程序并将其分成更小的块。

总会有一个主 bundle JS 文件。但只会下载 1 个小块文件。

当用户浏览应用程序并发现新页面时，其他小块将被下载。

这种方法使得浏览器很容易处理和执行。

代码块越小，TTI 结果（交互时间）就越快。

结论

对 React 应用程序进行代码拆分将带来更好的性能，因为它只会加载呈现页面所需的最少代码。

从而带来更好的用户体验，让您的用户感到满意。

Github代码：带有延迟加载的React路由器