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

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

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

1. 使用浏览器性能工具

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

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

使用Lighthouse检查网站性能

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

$ npm install -g lighthouse

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

$ lighthouse http://localhost:3000

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

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

现在我们了解了如何检查我们的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应用程序。大的和未经优化的图像会减慢你的 *** 应用，使它需要更长的时间来加载。下面是一些你可以用来优化你的图像的技巧：

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

小结

在这篇文章中，我们已经介绍了五种 *** ，可以用来提高React应用程序的性能，减少生产包的大小。这些可以为很多用户提供很大的改善，特别是那些 *** 连接较慢或低端设备没有那么强大的cpu。