使用 React Router v6 進(jìn)行延遲載入

延遲載入是 Web 開(kāi)發(fā)中的一種技術(shù)，它允許您僅在需要時(shí)載入元件，而不是預(yù)先載入所有內(nèi)容。這在大型應(yīng)用程式中特別有用，因?yàn)橐淮屋d入所有元件可能會(huì)減慢初始頁(yè)面載入速度。

React Router v6 與 React 內(nèi)建的 React.lazy 和 Suspense 無(wú)縫協(xié)作，實(shí)現(xiàn)路由的延遲載入。透過(guò)使用這些功能，您可以僅在使用者導(dǎo)航到元件時(shí)載入元件，從而提高應(yīng)用程式的效能和使用者體驗(yàn)。

React Router v6 中的延遲載入如何運(yùn)作

在React中，React.lazy用於動(dòng)態(tài)導(dǎo)入元件，而Suspense用於在取得延遲載入元件時(shí)進(jìn)行包裝。 React Router v6 可以輕鬆整合這些概念來(lái)延遲載入路由。

在 React Router v6 中實(shí)作延遲載入的步驟：

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

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

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

   • Suspense 用於在元件載入時(shí)指定後備 UI（如載入旋轉(zhuǎn)器）。

範(fàn)例：使用 React Router v6 進(jìn)行延遲載入

第 1 步：安裝所需的依賴項(xiàng)

確保您已安裝 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 />}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </Suspense>
    </Router>
  );
};

export default App;

說(shuō)明：

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

   • React.lazy 僅在需要時(shí)動(dòng)態(tài)導(dǎo)入元件，從而減少應(yīng)用程式的初始套件大小。
   • 這是針對(duì)範(fàn)例中的「首頁(yè)」、「關(guān)於」和「聯(lián)絡(luò)人」元件完成的。

2. 懸念：

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

3. 懸念中的後備道具：

   • fallback 屬性指定在取得延遲載入元件時(shí)應(yīng)顯示的 UI（在本例中，它是一個(gè)簡(jiǎn)單的載入訊息）。

使用巢狀路由進(jìn)行延遲載入

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

npm install react-router-dom@6

說(shuō)明：

• 這裡，Dashboard、DashboardOverview 和 DashboardSettings 元件在存取其對(duì)應(yīng)的路由時(shí)會(huì)延遲載入。
• Suspense 元件包裝路由以在這些巢狀元件載入時(shí)顯示回退載入狀態(tài)。

React Router v6 中延遲載入的最佳實(shí)踐

1. 分塊和程式碼拆分：React Router 允許您將應(yīng)用程式拆分為多個(gè)區(qū)塊，每個(gè)路由都是一個(gè)可以按需載入的單獨(dú)套件。這會(huì)減少初始載入時(shí)間並加快應(yīng)用程式的速度。

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

3. 預(yù)先載入關(guān)鍵路由：對(duì)於使用者可能首先導(dǎo)航到的關(guān)鍵頁(yè)面，請(qǐng)考慮在後臺(tái)預(yù)先載入這些路由，以便在使用者導(dǎo)航到它們時(shí)它們已準(zhǔn)備好。

4. 限制延遲載入：對(duì)非關(guān)鍵元件使用延遲載入。不要對(duì)不會(huì)顯著影響初始載入時(shí)間的小元件過(guò)度使用延遲載入。

結(jié)論

React Router v6 中的延遲載入由 React.lazy 和 Suspense 提供支持，僅在需要時(shí)載入元件，有助於優(yōu)化 React 應(yīng)用程式的效能。它透過(guò)減少初始載入時(shí)間來(lái)改善用戶體驗(yàn)，並允許您有效管理大型應(yīng)用程式。

透過(guò)結(jié)合用於程式碼分割的 React.lazy 和用於回退 UI 的 Suspense，React Router v6 可以輕鬆實(shí)現(xiàn)頂層路由和嵌套路由的延遲載入。

以上是在 React Router v6 中透過(guò)延遲載入優(yōu)化效能的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！