コード分割で React アプリのパフォーマンスを向上させる方法-jsチュートリアル-php.cn

How to Improve the Performance of Your React App with Code Splitting

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

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

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

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

コード分割の利点

初期ロード時間の短縮: 重要なコードのみが事前にロードされます。
パフォーマンスの向上: 特に低速ネットワークでは、バンドルが小さいほど読み込みが速くなります。
効率的なリソースの使用: リソースは必要に応じてロードされ、未使用のコードが最小限に抑えられます。
ユーザーエクスペリエンスの向上: ユーザーはアプリをより速く操作できます。
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);
  });

ログイン後にコピー

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