React Router v6 による遅延読み込み

遅延読み込みは、すべてを事前に読み込むのではなく、必要なときにのみコンポーネントを読み込むことができる Web 開(kāi)発の手法です。これは、すべてのコンポーネントを一度に読み込むと最初のページの読み込みが遅くなる可能性がある大規(guī)模なアプリケーションで特に役立ちます。

React Router v6 は、React の組み込み React.lazy および Suspense とシームレスに連攜して、ルートの遅延読み込みを?qū)g裝します。これらの機(jī)能を使用すると、ユーザーがコンポーネントに移動(dòng)したときにのみコンポーネントを読み込むことで、アプリのパフォーマンスとユーザー エクスペリエンスを向上させることができます。

React Router v6 での遅延読み込みの仕組み

React では、コンポーネントを動(dòng)的にインポートするために React.lazy が使用され、フェッチ中に遅延ロードされたコンポーネントをラップするために Suspense が使用されます。 React Router v6 では、これらの概念を簡(jiǎn)単に統(tǒng)合してルートを遅延読み込みできます。

React Router v6 で遅延読み込みを?qū)g裝する手順:

1. React.lazy を使用してコンポーネントを遅延ロードする

   • React.lazy を使用すると、ルートにアクセスしたときにのみ読み込まれるコンポーネントを定義できます。

2. Suspense を使用して遅延ロードされたコンポーネントをラップする

   • サスペンスは、コンポーネントの読み込み中にフォールバック UI (読み込みスピナーなど) を指定するために使用されます。

例: React Router v6 による遅延読み込み

ステップ 1: 必要な依存関係をインストールする

React Router v6 がインストールされていることを確認(rèn)してください:

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;

説明:

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

   • React.lazy は、必要な場(chǎng)合にのみコンポーネントを動(dòng)的にインポートし、アプリケーションの初期バンドル サイズを削減します。
   • この例では、Home、About、Contact コンポーネントに対してこれが行われています。

2. サスペンス:

   • Suspense コンポーネントは 全體にラップされています。遅延ロードされたコンポーネントがフェッチされるときにフォールバック UI () を提供するブロック。
   • これにより、コンポーネントの読み込み中に読み込みスピナーまたはメッセージが表示されます。

3. サスペンスのフォールバック プロップ:

   • フォールバック プロパティは、遅延ロードされたコンポーネントがフェッチされている間に表示される UI を指定します (この場(chǎng)合、単純なロード メッセージです)。

ネストされたルートによる遅延読み込み

遅延読み込みはネストされたルートにも適用でき、ネストされたコンポーネントを含むページの読み込み時(shí)間を改善します。

npm install react-router-dom@6

説明:

• ここでは、Dashboard、DashboardOverview、および DashboardSettings コンポーネントは、対応するルートがアクセスされるときに遅延読み込みされます。
• Suspense コンポーネントはルートをラップして、これらのネストされたコンポーネントの読み込み中にフォールバック読み込み狀態(tài)を表示します。

React Router v6 での遅延読み込みのベスト プラクティス

1. チャンク化とコード分割: React Router を使用すると、アプリをチャンクに分割し、各ルートをオンデマンドでロードできる個(gè)別のバンドルにすることができます。これにより、初期ロード時(shí)間が短縮され、アプリの速度が向上します。

2. フォールバックを賢く使用する: フォールバック UI が優(yōu)れたユーザー エクスペリエンスを提供するようにしてください。通常は、単純な読み込みスピナーまたはテキストで十分ですが、さらにカスタマイズすることもできます。

3. 重要なルートのプリロード: ユーザーが最初に移動(dòng)する可能性が高い重要なページについては、これらのルートをバックグラウンドでプリロードして、ユーザーがそれらのルートに移動(dòng)したときに準(zhǔn)備できるようにすることを検討してください。

4. 遅延読み込みを制限する: 重要ではないコンポーネントには遅延読み込みを使用します。初期読み込み時(shí)間に大きな影響を與えない小さなコンポーネントに対して遅延読み込みを過(guò)度に使用しないでください。

結(jié)論

React.lazy と Suspense を利用した React Router v6 の遅延読み込みは、必要なときにのみコンポーネントを読み込み、React アプリケーションのパフォーマンスを最適化するのに役立ちます。初期ロード時(shí)間を短縮することでユーザー エクスペリエンスが向上し、大規(guī)模なアプリケーションを効率的に管理できるようになります。

React Router v6 では、コード分割用の React.lazy とフォールバック UI 用の Suspense を組み合わせることで、トップレベル ルートとネストされたルートの両方に遅延読み込みを簡(jiǎn)単に実裝できます。

以上がReact Router v6 での遅延読み込みによるパフォーマンスの最適化の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。