これは、React プロジェクトで遅延読み込みとコード分割を実装するためのステップバイステップのガイドです。コンポーネントを遅延してロードする 2 つのルートを持つ単純なアプリケーションを作成します。

ステップ 1: 新しい React アプリを作成する

まだ作成していない場合は、Create React App を使用して新しい React アプリを作成します:

npx create-react-app lazy-loading-example
cd lazy-loading-example

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

ルーティング用にreact-router-domをインストールします:

npm install react-router-dom

ステップ 3: 遅延読み込みとコード分割を設定する

コンポーネントの作成

1. srcディレクトリ内にcomponentsという名前のフォルダを作成します。
2. コンポーネント内に、Home.js と About.js の 2 つのファイルを作成します。

Home.js

import React from 'react';

const Home = () => {
  return 
Home Page
;
};

export default Home;

About.js

import React from 'react';

const About = () => {
  return 
About Page
;
};

export default About;

App.jsを更新する

次に、App.js ファイルを変更して遅延読み込みとルーティングを実装します。

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

// Lazy load components
const Home = React.lazy(() => import('./components/Home'));
const About = React.lazy(() => import('./components/About'));

function App() {
  return (
    Loading...}>
        
  );
}

export default App;

ステップ 4: アプリケーションを実行する

次に、アプリケーションを実行して動作を確認します。

npm start

ステップ 5: 遅延読み込みをテストする

1. ブラウザを開いて http://localhost:3000 に移動します。
2. [ホーム] リンクをクリックして、ホーム コンポーネントのロードを確認します。
3. [About] リンクをクリックすると、About コンポーネントが遅延して読み込まれることがわかります。

重要なポイント

• React.lazy は、レンダリング時にのみ読み込まれるコンポーネントを動的にインポートするために使用されます。
• Suspense は、読み込み状態を処理するために使用され、遅延読み込みされたコンポーネントがフェッチされている間にフォールバックを表示します。
• このアプローチでは、コードをより小さなチャンクに分割することで、初期読み込み時間を大幅に短縮します。

追加の機能強化

次の方法でセットアップをさらに強化できます:

• 読み込みエラーをキャッチするために、遅延読み込みコンポーネントの周囲にエラー境界を実装します。
• 大規模なアプリケーション向けに React Router で高度なルーティング戦略を使用します。

より具体的な機能や追加のヘルプが必要な場合は、お知らせください。