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

現代の Web 開発では、パフォーマンスが最も重要です。ユーザーはアプリケーションの読み込みが高速であることを期待しており、これを実現するための最も効果的な戦略の 1 つはコード分割です。コード分​​割により、アプリケーションをより小さなチャンクに分割し、必要なときに必要なコードのみをロードできます。この記事では、React.lazy と Suspense を使用して React でコード分割を実装する方法について説明します。

コード分​​割を理解する

コード分割は、アプリケーションをオンデマンドでロードできる小さなバンドルに分割するプロセスです。これは、単一の大規模な JavaScript バンドルを配布すると読み込み時間が遅くなり、ユーザー エクスペリエンスが低下する可能性がある大規模なアプリケーションの場合に特に重要です。コードを分割すると、ユーザーが必要なときに必要なコードのみをダウンロードできるようになります。

バンドルの役割

ほとんどの React アプリケーションは、Webpack、Rollup、または Browserify などのバンドラーを使用して、ファイルを 1 つのバンドルに結合します。バンドルは効率的ですが、アプリケーションが成長するにつれてファイル サイズが大きくなる可能性があります。コード分​​割により、アプリケーションの必要な部分のみをロードできるため、この問題が軽減されます。

動的インポート

動的 import() 構文は、JavaScript でのコード分割の基礎です。これにより、モジュールを非同期でロードできるようになります。これは、React でコード分割を実装するために重要です。

// Before code splitting
import { add } from './math';

console.log(add(16, 26));

// After code splitting
import("./math").then(math => {
  console.log(math.add(16, 26));
});

import() を使用すると、バンドラーはインポートされたモジュール用に別のチャンクを自動的に作成します。

React.lazy の使用

React は、React.lazy を通じてコン​​ポーネント レベルでコード分割を実装する組み込みの方法を提供します。この関数を使用すると、動的にロードされるコンポーネントを定義できます。

例:

import React, { lazy } from 'react';

const AvatarComponent = lazy(() => import('./AvatarComponent'));

const DetailsComponent = () => (
  <div>
    <AvatarComponent />
  </div>
);

この例では、AvatarComponent は、DetailsComponent がレンダリングされるときにのみロードされるため、初期ロード時間が短縮されます。

サスペンスの紹介

React.lazy はコンポーネントの読み込みを処理しますが、読み込み状態は管理しません。ここで Suspense が登場します。Suspense を使用すると、遅延ロードされたコンポーネントがフェッチされている間に表示されるフォールバック UI を定義できます。

例:

import React, { lazy, Suspense } from 'react';

const AvatarComponent = lazy(() => import('./AvatarComponent'));

const renderLoader = () => <p>Loading...</p>;

const DetailsComponent = () => (
  <Suspense fallback={renderLoader()}>
    <AvatarComponent />
  </Suspense>
);

この例では、AvatarComponent の読み込み中、ユーザーには「読み込み中...」メッセージが表示されます。これにより、読み込みプロセス中にフィードバックが提供されるため、ユーザー エクスペリエンスが向上します。

複数のコンポーネントの処理

Suspense は、複数の遅延ロードされたコンポーネントを同時に管理することもできます。これは、ユーザーに表示される読み込みインジケーターの数を減らすのに役立ちます。

例:

import React, { lazy, Suspense } from 'react';

const AvatarComponent = lazy(() => import('./AvatarComponent'));
const InfoComponent = lazy(() => import('./InfoComponent'));

const renderLoader = () => <p>Loading...</p>;

const DetailsComponent = () => (
  <Suspense fallback={renderLoader()}>
    <AvatarComponent />
    <InfoComponent />
  </Suspense>
);

この場合、両方のコンポーネントが一緒にロードされ、両方の準備が完了するまでユーザーには 1 つのロード インジケーターが表示されます。

エラー境界

遅延ロードされたコンポーネントを扱う場合、潜在的なロード失敗に対処することが不可欠です。 React は、エラー境界を通じてこのためのパターンを提供します。エラー境界は、レンダリング中にエラーをキャッチし、フォールバック UI を表示できます。

例:

import React, { lazy, Suspense } from 'react';

const AvatarComponent = lazy(() => import('./AvatarComponent'));

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <p>Loading failed! Please reload.</p>;
    }
    return this.props.children;
  }
}

const DetailsComponent = () => (
  <ErrorBoundary>
    <Suspense fallback={<p>Loading...</p>}>
      <AvatarComponent />
    </Suspense>
  </ErrorBoundary>
);

この例では、AvatarComponent のロードに失敗すると、壊れた UI の代わりにわかりやすいエラー メッセージがユーザーに表示されます。

ルートベースのコード分割

コード分割を実装する最も効果的な場所の 1 つは、ルート レベルです。これは、異なるルートで異なるコンポーネントをロードできるシングルページ アプリケーション (SPA) で特に役立ちます。

例:

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

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

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

この例では、Home コンポーネントと About コンポーネントは、それぞれのルートがアクセスされたときにのみ読み込まれ、初期読み込み時間が最適化されます。

結論

コード分割は、React アプリケーションのパフォーマンスを大幅に向上させる強力な手法です。 React.lazy と Suspense を使用すると、コンポーネント レベルでコード分割を簡単に実装でき、ユーザーが必要なコードのみをダウンロードできるようになります。これにより、読み込み時間が短縮されるだけでなく、全体的なユーザー エクスペリエンスも向上します。

React アプリケーションを開発するときは、パフォーマンスを最適化するためにコード分割をどこに適用できるかを検討してください。ルートベースの分割から始めて、オンデマンドでロードできる大規模なコンポーネントを特定します。これらの戦略を使用すると、ユーザーを満足させる高速で効率的なアプリケーションを作成できます。

React、TypeScript、最新の Web 開発実践についてさらに詳しく知りたい場合は、私をフォローしてください!?‍?

以上がReact.lazy と Suspense を使用したコード分割の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。