React 延迟加载指南

由柏拉图重新发布

关注： 0

介绍

在开发大型 React 应用程序时，我们通常会使用许多图像和视频、安装第三方包/库、进行 API 调用以及执行各种其他操作。这自然会增加加载我们的应用程序所需的时间，并导致大量的包大小，从而导致糟糕的用户体验。那是哪里 延迟加载 到位。它使我们能够加载内容及时，就在它将显示在应用程序中之前。

我们可以避免在内容仍然不在视图时预加载内容，并将所有资源集中在视图中的内容上。

在本指南中，我们将了解如何使用 React.lazy() 和 React.Suspense 实现延迟加载和代码拆分功能，使我们无需安装任何额外的库即可处理代码拆分。

什么是延迟加载？

当我们启动一个 React Web 应用程序时，它通常会一次捆绑整个应用程序，为我们加载包括整个 Web 应用程序页面、图像、内容等等在内的所有内容，这可能会导致加载时间缓慢和整体性能不佳，具体取决于内容的大小和当时的互联网带宽。

懒加载 允许我们仅在需要时加载特定组件。通常，我们还执行 代码拆分 也可以延迟加载内容的逻辑组件。

例如，如果我们有一个仪表板页面，在单击时会显示来自各种来源的大量信息，那么最好让这些组件和页面保持延迟加载，以便它们仅在用户需要或需要时加载。

请注意： 将一大包代码拆分成多个可以动态加载的包的过程，其总体目标是避免与超大包相关的性能问题，称为代码分割. 这是在不减少我们应用程序中的代码量的情况下完成的。

总而言之，延迟加载允许我们按需渲染组件或元素，使我们的应用程序更高效并提供更好的用户体验。

请注意： 单页应用 （SPA） 旨在包含单个文档/页面中的所有页面和内容。这就是为什么延迟加载在开发 SPA 时特别方便的原因。

如何在 React 中实现延迟加载

到目前为止，我们已经了解了什么是延迟加载以及实现它的重要性。现在，让我们看看如何在我们的 React 应用程序中实现它，使用两个 React 特性，使代码分割和延迟加载更容易实现—— 反应懒惰（）和反应悬念.

React.lazy() 是一个允许我们渲染的函数 动态导入 与常规组件相同。与动态导入一起使用 React.lazy() 将使我们能够在组件呈现在屏幕上之前导入它。需要注意的重要一点是 React.lazy() 接受一个函数作为参数——该函数必须调用动态的 import() 在它的身体里。

React.Suspense 使我们能够指定回退支柱它接受一个占位符内容，该内容将用作 加载指示器 而所有惰性组件都被加载。

让我们从如何在导入的组件中实现延迟加载开始，然后我们如何在路由中实现它，以便在导航到它们之前不会加载页面。

入门

假设我们有我们的 React 应用程序，并且我们导入了 About 组件进入 Home:

import AboutUs from './About';

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <AboutUs />
      </div>
   );
};

export default Home;

我们现在可以通过使用实现延迟加载 React.lazy():

import React from 'react';


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

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <AboutUs />
      </div>
   );
};
export default Home;

请注意： React.lazy() 使用这种方式返回一个 Promise 目的。该承诺解析为一个包含我们想要延迟加载的 React 组件的模块 default 出口。

我们已经使用实现了延迟加载 React.lazy()，但上面的代码总是会抛出一个错误说我们的 “React component suspended while rendering, but no fallback UI was specified”. 这可以通过包装组件来解决 React.Suspense的 fallbackz 并附加我们之前解释的后备道具：

查看我们的 Git 学习实践指南，其中包含最佳实践、行业认可的标准以及随附的备忘单。停止谷歌搜索 Git 命令，实际上学习它！

import React from 'react';
const AboutUs = React.lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <React.Suspense fallback={<div>Loading...</div>}>
            <AboutUs />
         </React.Suspense>
      </div>
   );
};
export default Home;

请注意： fallback 道具可以在原始内容加载之前显示一个组件。

此外，我们可以决定解构 React 导入以使代码更清晰，更具可读性：

import { lazy, Suspense } from 'react';
const AboutUs = lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <Suspense fallback={<div>Loading...</div>}>
            <AboutUs />
         </Suspense>
      </div>
   );
};
export default Home;

到目前为止，我们已经了解了如何在导入的组件中实现延迟加载。现在，让我们看看在使用 React 路由时如何在路由中实现它。

如何使用 React Router 实现延迟加载

对于具有大量内容并且可能会减慢应用程序加载时间的路由，延迟路由实际上是一种很好的做法。为 React 路由实现延迟加载几乎与我们之前在延迟加载动态导入的组件时所做的相同。

延迟加载 React 路由是指仅在需要时才动态导入组件。例如，假设我们的应用程序中有两条路由和代表这些路由的两个组件。如果我们通过以下方式实现提到的路由，每个组件只有在我们导航到相应的路由时才会被加载：

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

const Home = lazy(() => import('./Home'));
const Products = lazy(() => import('./Products'));

function App() {
   return (
      <BrowserRouter>
         <Suspense fallback={<div>Loading...</div>}>
            <Routes>
               <Route path="/" element={<Home />} />
               <Route path="/products" element={<Products />} />
            </Routes>
         </Suspense>
      </BrowserRouter>
   );
}
export default App;