React 延遲加載指南

簡介

在開發大型 React 應用程序時，我們通常會使用許多圖像和視頻、安裝第三方包/庫、進行 API 調用以及執行各種其他操作。這自然會增加加載我們的應用程序所需的時間，並導致龐大的包大小，從而導致糟糕的用戶體驗。這就是 延遲加載 到位。它使我們能夠及時加載內容 ，就在它將顯示在應用程序中之前。

我們可以避免在內容仍然不在視圖時預加載內容，並將所有資源集中在視圖中的內容上。

什麼是延遲加載？

當我們啟動一個 React Web 應用程序時，它通常會一次捆綁整個應用程序，為我們加載包括整個 Web 應用程序頁面、圖像、內容等等在內的所有內容，這可能會導致加載時間緩慢和整體性能不佳，具體取決於內容的大小和當時的互聯網帶寬。

延遲加載 允許我們僅在需要時加載特定組件。通常，我們還執行代碼拆分 也可以將內容延遲加載到邏輯組件中。

例如，如果我們有一個儀表板頁面，在單擊時會顯示來自各種來源的大量信息，那麼最好讓這些組件和頁面保持延遲加載，以便它們僅在用戶需要或要求時加載。

注意： 將一大包代碼拆分成多個可以動態加載的包的過程，其總體目標是避免與超大包相關的性能問題，稱為代碼拆分。這是在不減少應用程序代碼量的情況下完成的。

總之，延遲加載讓我們可以按需渲染組件或元素，讓我們的應用更高效，並提供更好的用戶體驗。

注意： 單頁應用程序（SPA） 旨在包含單個文檔/頁面中的所有頁面和內容。這就是延遲加載在開發 SPA 時特別方便的原因。

如何在 React 中實現延遲加載

到目前為止，我們已經了解了什麼是延遲加載以及實現它的重要性。現在，讓我們看看如何在我們的 React 應用程序中實現它，使用兩個 React 特性，使代碼拆分和延遲加載更容易實現 - React.lazy() 和 React.Suspense。

React.lazy() 是一個允許我們渲染動態導入的函數 與常規組件相同。在 React.lazy() 旁邊使用動態導入 將使我們能夠在組件呈現在屏幕上之前導入它。需要注意的重要一點是 React.lazy() 接受一個函數作為參數 - 該函數必須調用動態 import() 在它的身體裡。

React.Suspense 使我們能夠指定後備 prop 它接受一個佔位符內容，該內容將用作 加載指示器 同時加載所有惰性組件。

開始使用

假設我們有我們的 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';

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

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

注意： React.lazy() 以這種方式使用返回 Promise 目的。該承諾解析為一個包含我們希望在其 default 中延遲加載的 React 組件的模塊 出口。

我們使用 React.lazy() 實現了延遲加載 ，但上面的代碼總是會拋出一個錯誤 說我們的“React component suspended while rendering, but no fallback UI was specified” .這可以通過使用 React.Suspense 包裝組件來解決 的fallbackz 並附加我們之前解釋的後備道具：

免費電子書：Git Essentials

查看我們的 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 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;

結論

在本指南中，我們了解了什麼是延遲加載和代碼拆分，如何實現它們，以及實現延遲加載的最佳位置是使用路由。這樣可以避免一次渲染整個頁面，從而在處理包含大量內容的頁面時可能會導致加載時間變慢。