在 React Router v6 中透過延遲載入優化效能

使用 React Router v6 進行延遲載入

延遲載入是 Web 開發中的一種技術，它允許您僅在需要時載入元件，而不是預先載入所有內容。這在大型應用程式中特別有用，因為一次載入所有元件可能會減慢初始頁面載入速度。

React Router v6 與 React 內建的 React.lazy 和 Suspense 無縫協作，實現路由的延遲載入。透過使用這些功能，您可以僅在使用者導航到元件時載入元件，從而提高應用程式的效能和使用者體驗。

---

React Router v6 中的延遲載入如何運作

在React中，React.lazy用於動態導入元件，而Suspense用於在取得延遲載入元件時進行包裝。 React Router v6 可以輕鬆整合這些概念來延遲載入路由。

在 React Router v6 中實作延遲載入的步驟：

1. 使用 React.lazy 延遲載入元件

   • React.lazy 可讓您定義僅在存取路由時載入的元件。

2. 使用 Suspense 包裝延遲載入的組件

   • Suspense 用於在元件載入時指定後備 UI（如載入旋轉器）。

---

範例：使用 React Router v6 進行延遲載入

第 1 步：安裝所需的依賴項

確保您已安裝 React Router v6：

npm install react-router-dom@6

第 2 步：定義延遲載入的元件

import React, { Suspense } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

// Lazy load components using React.lazy
const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));
const Contact = React.lazy(() => import('./Contact'));

// Fallback UI component to show while lazy-loaded component is loading
const FallbackLoader = () => <div>Loading...</div>;

const App = () => {
  return (
    <router>
      <suspense fallback="{<FallbackLoader"></suspense>}>
        <routes>
          <route path="/" element="{<Home"></route>} />
          <route path="/about" element="{<About"></route>} />
          <route path="/contact" element="{<Contact"></route>} />
        </routes>
      
    </router>
  );
};

export default App;

說明：

1. React.lazy(() => import('./Home')):

   • React.lazy 僅在需要時動態導入元件，從而減少應用程式的初始套件大小。
   • 這是針對範例中的「首頁」、「關於」和「聯絡人」元件完成的。

2. 懸念：

   • Suspense 組件包裹在整個 周圍。阻止在取得延遲載入元件時提供後備 UI ()。
   • 這可確保在載入元件時出現載入微調器或訊息。

3. 懸念中的後備道具：

   • fallback 屬性指定在取得延遲載入元件時應顯示的 UI（在本例中，它是一個簡單的載入訊息）。

---

使用巢狀路由進行延遲載入

延遲載入也可以套用於巢狀路由，提高具有巢狀元件的頁面的載入時間。

npm install react-router-dom@6

說明：

• 這裡，Dashboard、DashboardOverview 和 DashboardSettings 元件在存取其對應的路由時會延遲載入。
• Suspense 元件包裝路由以在這些巢狀元件載入時顯示回退載入狀態。

---

React Router v6 中延遲載入的最佳實踐

1. 分塊和程式碼拆分：React Router 允許您將應用程式拆分為多個區塊，每個路由都是一個可以按需載入的單獨套件。這會減少初始載入時間並加快應用程式的速度。

2. 明智地使用後備：確保後備 UI 提供良好的使用者體驗。一個簡單的載入旋轉器或文字通常就足夠了，但您可以進一步自訂它。

3. 預先載入關鍵路由：對於使用者可能首先導航到的關鍵頁面，請考慮在後台預先載入這些路由，以便在使用者導航到它們時它們已準備好。

4. 限制延遲載入：對非關鍵元件使用延遲載入。不要對不會顯著影響初始載入時間的小元件過度使用延遲載入。

---

結論

React Router v6 中的延遲載入由 React.lazy 和 Suspense 提供支持，僅在需要時載入元件，有助於優化 React 應用程式的效能。它透過減少初始載入時間來改善用戶體驗，並允許您有效管理大型應用程式。

透過結合用於程式碼分割的 React.lazy 和用於回退 UI 的 Suspense，React Router v6 可以輕鬆實現頂層路由和嵌套路由的延遲載入。

---

以上是在 React Router v6 中透過延遲載入優化效能的詳細內容。更多資訊請關注PHP中文網其他相關文章！