如何优化你的React应用程序的性能

WBOLT_COM 3 月 27, 2023 572 0

如何优化你的React应用程序的性能

React是一个广泛流行的用于构建用户界面的JavaScript库。它的声明性、JSX语法和虚拟DOM的结合使其成为编写UI代码的绝佳选择。然而，构建性能良好的大规模React应用程序可能是一个挑战。随着你的应用程序的复杂性增加，你可能会注意到其性能的下降，这可能会严重影响用户体验。因此，必须优化你的React应用程序的性能，以确保它的快速、响应和高效。

在这篇文章中，我们将探讨你可以使用的最佳优化技术，使你的React应用程序运行得更快。我们还将讨论识别性能瓶颈，避免的常见陷阱，以及优化你的应用程序性能的具体策略。

1. 使用浏览器性能工具

检查你的应用程序性能的最有效方法是通过你的网络浏览器。有几个浏览器内的工具可以给你准确的测量，并确定你的代码可能会减慢的地方。Lighthouse就是这样一个工具。

Lighthouse扩展是检查应用程序基本性能的一个好方法。除了检查性能之外，Lighthouse还将查看你的网页的可访问性，以及你是否遵循了网络的最佳实践。它将检查你的网页是否针对搜索引擎机器人进行了优化，并将查看你的网络应用程序是否符合渐进式网络应用程序的标准要求。

使用Lighthouse检查网站性能

你可以通过两种方式运行Lighthouse的审计：在命令行或在浏览器中。如果你想在命令行上运行审计，你首先需要安装Lighthouse命令：

$ npm install -g lighthouse

然后，你可以用lighthouse命令运行审计：

$ lighthouse http://localhost:3000

Lighthouse的命令行版本只是一个用于Google Chrome浏览器的自动化脚本。它的优点是可以生成HTML审计报告，这使它适合在持续集成服务器上使用。你也可以在谷歌浏览器中交互式地使用Lighthouse。最好是在隐身窗口中进行，因为这样可以减少其他扩展程序和存储对Lighthouse审计的干扰。启动Chrome浏览器并打开你的应用程序后，进入开发者工具，然后切换到Lighthouse标签。

使用Lighthouse检查网站性能-2

然后点击 “Generate audit” 按钮。Lighthouse会多次刷新你的页面，并进行一系列的审计。性能审计将集中在六个不同的指标上。这些指标被称为Web vitals。当应用程序在生产中运行时，网络生命体是你可以用来跟踪性能的指标。

现在我们了解了如何检查我们的React应用程序的性能，让我们深入研究可以帮助优化其性能的具体技术。

2. 使用React.Suspense和React.Lazy来实现懒惰加载组件

懒加载组件可以通过减少初始加载时间来显著提高你的React应用程序的性能。懒加载的理念是只在需要时才加载一个组件。React捆绑了React.Lazy和React.Suspense API，这样你就可以把动态导入作为一个常规组件来渲染。在这里，不要像这样加载你的常规组件：

import LazyComponent from './LazyComponent';

你可以通过使用懒惰的方法来渲染一个组件来减少性能的风险。

const LazyComponent = React.lazy(() => import('./LazyComponent'));

React.lazy需要一个必须调用动态import()的函数。然后，这将返回一个Promise，该Promise解析为一个包含React组件的默认导出模块。

懒惰组件应该在暂停组件内呈现，这允许你在等待懒惰组件加载时添加回退内容作为加载状态。

import React, { Suspense } from 'react';
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function MyComponent() {
return (
<div>
  <Suspense fallback={<div>Loading....</div>}>
      <LazyComponent />
  </Suspense>
</div>
);
}

3. 用Memo对React组件进行改造

React.memo是一个函数，你可以用它来优化纯函数组件和钩子的渲染性能。它在React v16.6.中被引入。

Memo源自于memoization。这意味着用React.Memo包装的函数的结果被保存在内存中，如果它被再次调用相同的输入，则返回缓存的结果。

现在，让我们看看它是如何工作的。

基本用法如下，你必须将你的函数组件包裹在React.memo()函数中。这倾向于用内联式的函数看起来更好：

const Title = React.memo(() => {
let eventUpdates = React.useRef(0);
return (
<div className="black-tile">
      <Updates updates={eventUpdates.current++} />
</div>
);
});

这个小小的改变将帮助你提高你的组件的渲染性能。

4. Tree-shaking

Tree-shaking是现代JavaScript应用程序中使用的一种技术，用于消除最终捆绑的未使用代码。在一个大型的React应用程序中，可能有许多组件、函数和其他代码对于一个特定的页面或功能是不必要的。树状摇动使你能够删除这些未使用的代码，减少包的大小，提高应用程序的性能。

Tree-shaking的工作原理是分析你的代码的依赖关系，并删除任何不使用或不被引用的代码。这是由捆绑工具，如Webpack，在构建过程中完成的。当你导入一个模块时，捆绑器将只包括在你的应用程序中实际使用的代码部分。

为了确保你的React应用程序可以利用树形摇动的优势，你应该使用ES6模块，并确保你的代码是模块化的，并遵循组织和导入/导出代码的最佳实践。此外，当你只需要其中一小部分时，你应该避免导入整个库。

5. 优化你的图像

优化图像是提高任何应用程序性能的一个重要部分，包括React应用程序。大的和未经优化的图像会减慢你的网络应用，使它需要更长的时间来加载。下面是一些你可以用来优化你的图像的技巧：

压缩你的图像：图像压缩可以减少你的图像的大小，而不明显影响质量。有几个图像压缩工具，如TinyPNG、JPEGmini和Kraken.io，它们可以在不损失质量的情况下压缩你的图像。
使用适当的图像格式：不同的图像格式更适合于不同类型的图像。例如，JPEG更适合照片，而PNG更适合有透明背景的图像。
调整你的图像大小：大的图像会减慢你的网站。将你的图像调整到适当的大小，可以减少你的图像的大小，提高你的网络应用程序的性能。
懒加载你的图像：懒加载图像意味着只有在需要的时候才加载图像，比如当它们出现在用户的屏幕上。(我们在文章的第二部分讨论了这个特殊的技术。)
使用响应式图像：响应式图像可以适应用户屏幕的大小，这可以提高你的网站在不同设备上的性能。使用srcset和 sizes属性，为每个设备提供合适的图像尺寸。