如何使用懒加载提升 React 应用的性能？

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

原文发布于我的博客

如你所知，React 是一个用于构建用户界面的 JavaScript 库。开发 React 应用时，我们会构建许多组件，最终将它们打包成一个文件。即使构建过程会对其进行压缩以减小体积，但根据文件大小和第三方库的依赖程度，最终打包后的文件仍然可能非常大。
然而，我们可以使用一种称为“懒加载”的技术来进一步优化打包后的文件大小。

在本教程中，我们将学习如何使用懒加载来提升 React 应用的性能。

先决条件

本教程假设您至少具备React和React Router的基本到中级知识，我将只专注于 Lazy Loading 部分。

如果您需要开始使用 React Router，本教程可能会对您有所帮助；否则，让我们先来了解一些先决条件。

为了能够跟着教程操作，您需要在终端中运行以下命令来克隆该项目的仓库：

git clone https://github.com/ibrahima92/prep-react-lazy-loading

npm install在终端中运行命令以安装依赖项。

那么，如果您已经完成了所有准备工作，让我们开始延迟加载组件吧。

什么是延迟加载？

延迟加载或代码分割是指延迟加载一段代码的能力。这意味着，页面加载时不会打包加载所有代码，而是只加载所需的代码，并且某些部分会在需要时加载。

什么时候需要延迟加载？

代码拆分对于中型到大型的 React 应用非常有用。即使在一些中型应用中，我们也不需要懒加载。

如果你的应用中包含一些大多数用户不会访问的部分，那么延迟加载这些部分就比增加应用包大小、从而降低应用性能更有意义。

说实话，在这个小项目中，延迟加载有点杀鸡用牛刀了，但是用一个小项目来学习如何做这些事情总是要简单得多。

现在，让我们开始延迟加载组件。

如何实现组件的懒加载？

在 React 16.6 之前，组件懒加载要么通过高阶组件 (HOC) 实现，要么通过库来实现。现在，借助 React Lazy 和 React Suspense，组件懒加载变得更加容易。然而，React Lazy 不支持命名导出和服务端渲染。

值得注意的是，代码分割是一个高级概念，有些打包工具并不支持它。create-react-app它提供了非常出色且现代化的配置，请尽可能使用它。

那么，让我们App.js稍微更新一下文件，看看它们实际运行的效果。

• 在App.js

import React, { lazy, Suspense } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom'

import NavBar from './components/NavBar';
import Posts from './components/Posts/Posts';
const Users = lazy(() => import('./components/Users/Users')) 

function App() {

  return (
    <BrowserRouter>
      <main>
      <NavBar />
      <Switch>
        <Route exact path="/" component={Posts}  />
        <Route path="/users" render={() =>
          <Suspense fallback={<h1>Loading....</h1>}>
            <Users />
          </Suspense>
        }/>
      </Switch>
      </main>
    </BrowserRouter>
    );
}

export default App;

如您所见，我们首先从 React 库导入lazy组件。然后，我们没有直接导入组件，而是使用延迟加载机制，以便在需要时动态导入所需的组件。SuspenseUserslazy

有了这一改变以及的帮助Suspense，我们现在可以使用renderReact Router 提供的 props 来显示导入的组件，如果加载时间过长，它将使用fallback来显示加载消息。

顺便说一下，对于这个fallback属性，你不仅限于简单的消息，还可以使用旋转指示器组件、加载指示器等等。

现在，要查看发生了哪些变化，您需要打开浏览器开发者工具并检查该Network选项卡，然后您会看到，当您点击该Users页面时，会加载新的数据块。

通过这一改变，我们现在已经成功地使用 React Lazy 和 React Suspense 延迟加载组件。

结论

延迟加载是提升 React 应用性能的好方法。在某些情况下它非常有用，绝对值得了解和使用。然而，在不需要的时候使用延迟加载可能会导致一些性能问题。

照片由Kate Stone Matheson拍摄，来自Unsplash