遅延読み込みによる React アプリのパフォーマンス

導入

現代の Web 開発の世界では、スピードとパフォーマンスが鍵となります。 React アプリが成長するにつれてバンドル サイズが増加し、読み込み時間が遅くなる可能性があります。 遅延読み込み は、必要な場合にのみコンポーネントを読み込むことができる最適化手法であり、初期読み込み時間を短縮し、パフォーマンスを向上させるのに役立ちます。

遅延読み込みとは何ですか?

遅延読み込み (またはコード分割) は、実際に必要になるまでリソース (コンポーネントなど) の読み込みを遅らせる方法です。これにより、初期読み込みサイズが削減され、アプリのパフォーマンスが向上します。

たとえば、複数ページのアプリでは、すべてのルートのコンポーネントを事前にロードする必要はありません。ユーザーが特定のルートに移動するときにそれらをロードできます。これにより、特に低速ネットワークでの初期バンドル サイズが削減され、読み込み時間が短縮されます。

遅延読み込みが重要な理由

1. 初期ロード時間の短縮: 重要なコンポーネントのみを最初にロードすることで、初期バンドル サイズが小さくなり、ロード時間が短縮されます。

2. 最適化された帯域幅使用: 不要なリソースは必要になるまで取得されないため、データ使用量が削減されます。

3. ユーザー エクスペリエンスの強化: アプリの読み込みが速くなると、ユーザー エクスペリエンスが向上し、ユーザー維持率とエンゲージメントが向上します。

---

React で遅延読み込みを実装する方法

React には、React 16.6 で導入された React.lazy と Suspense を使用した遅延読み込みのサポートが組み込まれています。

React.lazy と Suspense を使用した基本的な例

1. 通常のコンポーネントのインポート:

   import MyComponent from './MyComponent';

この場合、MyComponent は初期バンドルの一部としてロードされます。

1. コンポーネントの遅延ロード: React.lazy を使用して、必要な場合にのみコンポーネントを動的にロードします。

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

1. フォールバックにサスペンションを使用する: コンポーネントの遅延読み込みには時間がかかるため、React は、遅延読み込みコンポーネントがフェッチされている間にフォールバック UI (読み込みスピナーなど) を表示する Suspense コンポーネントを提供します。

   import React, { Suspense } from 'react';

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

   function App() {
     return (
       

         Loading...
}>
           
         
       
     );
   }
   export default App;

この例では、MyComponent が必要な場合、React はそれを動的にインポートし、コンポーネントの準備ができるまで読み込みメッセージを表示します。

---

遅延読み込みルート

遅延読み込みは、複数のルートを持つ大規模なアプリケーションに特に役立ちます。 React Router を使用すると、ルート コンポーネントを簡単に遅延ロードできます。

1. react-router-dom をまだインストールしていない場合はインストールします。

   npm install react-router-dom

1. ルートを遅延読み込みする方法の例を次に示します。

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

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

   function App() {
     return (
       <router>
         <suspense fallback="{<div">Loading...}>
           <routes>
             <route path="/" element="{<Home"></route>} />
             <route path="/about" element="{<About"></route>} />
           </routes>
         </suspense>
       </router>
     );
   }
   export default App;

この例では、Home コンポーネントと About コンポーネントは、それぞれのルートが訪問されたときにのみ遅延読み込みされます。

---

遅延読み込みに関する高度なヒント

1. コンポーネントのプリロード: コンポーネントが必要になる前に (リンク上にマウスを置いたときなど)、コンポーネントをプリロードしたい場合があります。これは、特定の条件が満たされたときにコンポーネントを動的にインポートすることで実行できます。

   const preloadAbout = () => {
     import('./pages/About');
   };

1. チャンクの名前付け: Webpack を使用すると、遅延読み込みを使用するときにチャンクに名前を付けることができます。これは、デバッグやパフォーマンスの監視に役立ちます。

   const About = React.lazy(() => import(/* webpackChunkName: "about" */ './pages/About'));

1. エラー境界: ネットワークの問題により、遅延読み込みが失敗する可能性があります。エラー境界を使用すると、このようなケースを適切に処理するのに役立ちます。

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

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

     render() {
       if (this.state.hasError) {
         return <div>Error loading component!</div>;
       }
       return this.props.children;
     }
   }

   // Usage
   <errorboundary>
     <suspense fallback="{<div">Loading...}>
       <mycomponent></mycomponent>
     </suspense>
   </errorboundary>

---

パフォーマンスに関する考慮事項

遅延読み込みはパフォーマンスを大幅に向上させることができますが、戦略的に使用する必要があります。遅延ロードされたコンポーネントが多すぎることでアプリケーションをオーバーロードすると、ルート間を移動したりコンポーネントをレンダリングしたりするときに遅延が発生する可能性があります。実行時の「過剰な」読み込みを避けるために、遅延読み込みとユーザー エクスペリエンスのバランスを常に保ってください。

---

結論

遅延読み込みは、React アプリケーションのパフォーマンスを向上させる効果的な方法です。必要な場合にのみコンポーネントをロードすることで、初期バンドル サイズを削減し、帯域幅を節約し、ユーザーにより良いエクスペリエンスを提供できます。

遅延読み込みの実装は、React.lazy と Suspense を使用すると簡単です。React Router と組み合わせると、アプリ内のルートを効率的に遅延読み込みできます。これらのテクニックを使用して、今すぐ React アプリを最適化してください!

---

追加リソース

• React ドキュメント: コード分割
• Webpack ドキュメント: 動的インポート

以上が遅延読み込みによる React アプリのパフォーマンスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。