コード分​​割で React アプリのパフォーマンスを向上させる方法

React アプリケーションのサイズと複雑さが増大するにつれて、JavaScript バンドルのサイズは、特に低速のネットワークやデバイスでパフォーマンスに大きな影響を与える可能性があります。この問題を軽減する効果的な方法の 1 つは、コード分割、つまりアプリケーションをより小さなチャンクに分割する手法です。これらのチャンクはオンデマンドでロードされるため、初期ロード時間が短縮され、全体的なパフォーマンスが向上します。

この記事では、コード分割とは何か、コード分割がなぜ重要なのか、React アプリでコード分割を効果的に実装する方法について説明します。

コード分割とは何ですか?
コード分​​割は、JavaScript コードを、必要に応じて動的にロードできる小さなバンドルに分割するために使用される戦略です。 1 つの大きな JavaScript ファイルをブラウザーに配信する代わりに、コード分割を使用すると、ユーザーの操作にすぐに必要なコードの部分のみを送信できます。これにより、アプリの初期読み込み時間が短縮されます。

React は動的インポートと Webpack などのツールを使用してコード分割を可能にします。

コード分割の利点

1. 初期ロード時間の短縮: 重要なコードのみが事前にロードされます。
2. パフォーマンスの向上: 特に低速ネットワークでは、バンドルが小さいほど読み込みが速くなります。
3. 効率的なリソースの使用: リソースは必要に応じてロードされ、未使用のコードが最小限に抑えられます。
4. ユーザー エクスペリエンスの向上: ユーザーはアプリをより速く操作できます。
5. React でのコード分割の実装

1. React の React.lazy と Suspense の使用
React は、コンポーネントを遅延ロードする React.lazy と、遅延ロードされたコンポーネントがフェッチされている間にフォールバック UI を表示する Suspense を提供します。

これが例です:
ステップ 1: コンポーネントを遅延ロードする

import React, { Suspense } from 'react';

// Lazy load the component
const LazyLoadedComponent = React.lazy(() => import('./LazyLoadedComponent'));

function App() {
  return (
    <div>
      <h1>React Code Splitting Example</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyLoadedComponent />
      </Suspense>
    </div>
  );
}

export default App;

説明:

• React.lazy(() => import('./LazyLoadedComponent')): 必要な場合にのみコンポーネントを動的にインポートします。
• <サスペンスフォールバック={
  読み込み中...
  }>: コンポーネントのロード中にフォールバック UI (ロード スピナーなど) を表示します。

2.ルートによるコード分割
大規模なアプリケーションの場合、ルートごとにコードを分割することは、パフォーマンスを向上させる最も効果的な方法の 1 つです。 React Router のようなライブラリを使用すると、このプロセスがシームレスになります。

ステップ 1: React Router をインストールする

import React, { Suspense } from 'react';

// Lazy load the component
const LazyLoadedComponent = React.lazy(() => import('./LazyLoadedComponent'));

function App() {
  return (
    <div>
      <h1>React Code Splitting Example</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyLoadedComponent />
      </Suspense>
    </div>
  );
}

export default App;

ステップ 2: ルートを使用したコード分割の実装

npm install react-router-dom

利点:

• アクティブなルートの JavaScript のみがロードされます。
• 初期バンドルのサイズを削減します。

3. Webpack の動的インポートの使用
Webpack をモジュール バンドラーとして使用している場合、すぐに動的なインポートがサポートされます。 Webpack はコードを動的にロードできるチャンクに分割します。

React アプリでの使用方法は次のとおりです:

例:

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

// Lazy load components for routes
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...</div>}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </Suspense>
    </Router>
  );
}

export default App;

仕組み:

• Webpack は HeavyComponent 用に別のチャンクを作成します。
• チャンクは、loadComponent() が呼び出された場合にのみロードされます。

4. Webpack Bundle Analyzer を使用したバンドルの分析
コード分​​割を実装する前に、バンドル サイズの原因を理解することが重要です。 Webpack は、バンドルの内容を視覚化する Bundle Analyzer と呼ばれるツールを提供します。

ステップ 1: Webpack Bundle Analyzer をインストールする

function loadComponent() {
  import('./HeavyComponent')
    .then((module) => {
      const Component = module.default;
      // Use the component here
    })
    .catch((error) => {
      console.error('Error loading the component:', error);
    });
}

ステップ 2: Webpack を構成する
プラグインを Webpack 設定に追加します:

npm install --save-dev webpack-bundle-analyzer

ステップ 3: バンドルを分析する

ビルド コマンドを実行してレポートを生成します:

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin(),
  ],
};

アナライザーは各モジュールのサイズを示すツリー マップを表示し、最適化の機会を特定するのに役立ちます。

5.コード分​​割によるサードパーティ ライブラリの使用
大規模なサードパーティ ライブラリ (lodash、moment.js など) により、バンドルのサイズが肥大化する可能性があります。これらのライブラリを個別のチャンクに分割したり、ツリーシェイキングを使用してライブラリの未使用部分を削除したりできます。

例: ライブラリの動的インポート

npm run build

ツリーシェイキングの例:
ライブラリ全体をインポートする代わりに:

import('lodash')
  .then((_) => {
    const uniq = _.uniq([1, 2, 2, 3]);
    console.log(uniq);
  })
  .catch((error) => {
    console.error('Error loading lodash:', error);
  });

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

1. ルートベースの分割から始める: これは、初期読み込み時間を短縮する最も簡単で効果的な方法です。
2. 過剰な分割を避ける: チャンクが多すぎると、過剰な HTTP リクエストが発生する可能性があります。
3. コード分割と遅延読み込みを組み合わせる: 現在のユーザー操作に必要なものだけを読み込みます。
4. パフォーマンスの監視: Lighthouse などのツールを使用して、コード分割を実装した後の改善を測定します。
5. 最新のビルド ツールを使用する: Webpack、Vite、Parcel などのツールには、コード分割のサポートが組み込まれています。

結論
コード分​​割は、React アプリケーションのパフォーマンスを大幅に向上させる強力な最適化手法です。アプリを小さなチャンクに分割し、オンデマンドで読み込むことで、初期読み込み時間を短縮し、ユーザー エクスペリエンスを向上させ、アプリの効率を高めることができます。

ルートベースの分割から始めて、コンポーネントレベルまたはライブラリレベルの分割を試して、アプリのニーズに合わせて最適化を調整します。コード分​​割を遅延読み込みやツリーシェイクなどの他のパフォーマンス手法と組み合わせて、React アプリの効率を最大化します。

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