React.lazy によるコード分割: アプリのパフォーマンスを向上させる

React の React.lazy を使用したコード分割

コード分割 は、JavaScript バンドルをより小さなチャンクに分割することで React アプリケーションのパフォーマンスを最適化する手法です。 React は、コンポーネント レベルでコード分割を実装するための組み込み方法として React.lazy を提供します。これにより、必要に応じてアプリケーションの一部を動的にロードできるようになります。

---

React.lazy でのコード分割の仕組み

1. 動的インポート: ES6 import() を使用してコンポーネントを動的に読み込みます。
2. 小さなバンドル: アプリを小さなバンドルに分割し、初期読み込み時間を短縮します。
3. 非同期読み込み: 必要な場合にのみコンポーネントを非同期的に読み込みます。

---

構文

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

function App() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </React.Suspense>
  );
}

• React.lazy: 指定されたコンポーネントを動的にインポートします。
• Suspense: コンポーネントのロード中にフォールバック UI を提供します。

---

例 1: React.lazy を使用した基本的なコード分割

コード分​​割なし

import React from "react";
import HeavyComponent from "./HeavyComponent";

function App() {
  return (
    <div>
      <h1>Main App</h1>
      <HeavyComponent />
    </div>
  );
}

export default App;

このアプローチでは、すぐに必要でない場合でも、HeavyComponent 全体がメイン アプリにバンドルされます。

コード分​​割あり

import React, { Suspense } from "react";

const HeavyComponent = React.lazy(() => import("./HeavyComponent"));

function App() {
  return (
    <div>
      <h1>Main App</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <HeavyComponent />
      </Suspense>
    </div>
  );
}

export default App;

現在、HeavyComponent はレンダリング時にのみロードされます。これにより、最初のバンドルのサイズが小さくなります。

---

例 2: ルート内のコード分割

コード分割は React Router とシームレスに連携して、ルート コンポーネントを動的に読み込みます。

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

const Home = React.lazy(() => import("./Home"));
const About = React.lazy(() => import("./About"));
const Contact = React.lazy(() => import("./Contact"));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading Page...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </Suspense>
    </Router>
  );
}

export default App;

利点：

• 各ルート コンポーネント (Home、About、Contact) は、対応するルートにアクセスした場合にのみロードされます。

---

例 3: 複数のコンポーネントの遅延ロード

論理分割を使用して、単一のアプリに複数のコンポーネントを遅延読み込みします。

import React, { Suspense, useState } from "react";

const ComponentA = React.lazy(() => import("./ComponentA"));
const ComponentB = React.lazy(() => import("./ComponentB"));

function App() {
  const [showA, setShowA] = useState(false);
  const [showB, setShowB] = useState(false);

  return (
    <div>
      <button onClick={() => setShowA(true)}>Load Component A</button>
      <button onClick={() => setShowB(true)}>Load Component B</button>

      <Suspense fallback={<div>Loading...</div>}>
        {showA && <ComponentA />}
        {showB && <ComponentB />}
      </Suspense>
    </div>
  );
}

export default App;

---

React.lazy によるエラー処理

React は、失敗したインポートに対する組み込みのエラー処理を提供しません。このようなケースを処理するには、エラー境界 を使用できます。

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

function App() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </React.Suspense>
  );
}

---

コード分​​割のベスト プラクティス

1. ルートまたは機能ごとに分割: アプリをルートや主要な機能などの論理的なチャンクに分割します。
2. フォールバックを最小限に抑える: スピナーやテキスト メッセージなどの軽量のフォールバック UI を使用します。
3. バンドル サイズの監視: Webpack Bundle Analyzer などのツールを使用して、大きなコンポーネントを特定します。
4. 過剰な分割を避ける: チャンクの数とパフォーマンスのバランスを保ちます。チャンクが多すぎると、HTTP リクエストが増加する可能性があります。

---

コード分​​割を強化するツール

1. Webpack: コード分割のための動的インポートをサポートします。
2. Vite: 高速ビルドと自動コード分割を提供します。
3. React Router: ルートベースの遅延読み込みとの簡単な統合を可能にします。
4. React Loadable: 遅延読み込みの制御を強化するためのサードパーティ ライブラリ。

---

結論

React.lazy を使用したコード分割は、アプリのパフォーマンスを向上させる強力な方法です。コンポーネントを動的にロードすることで、初期ロード時間を短縮し、ユーザー エクスペリエンスを向上させることができます。 Suspense および適切なエラー処理と組み合わせると、効率的でスケーラブルな React アプリケーションを構築するための堅牢なソリューションが提供されます。

---

以上がReact.lazy によるコード分割: アプリのパフォーマンスを向上させるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。