React.js の遅延読み込み: 説明-jsチュートリアル-php.cn

チートシートと例を含む完全なガイド

簡単な紹介

遅延読み込みは、Web 開発、特に React などのライブラリやフレームワークでの効果的なパフォーマンス最適化手法です。これには、ユーザーのアクションに応じて、または要素が画面に表示されようとしているときなど、必要な場合にのみコンポーネントまたはリソースがロードされます。これにより、特にパフォーマンスが制限されているデバイスやインターネット接続が遅いデバイスでのアプリケーションの初期読み込み時間が短縮され、リソース消費が減少し、ユーザーエクスペリエンスが向上します。

React での遅延読み込みの仕組み

React は、主に React.lazy 関数を通じて遅延読み込みを実装します。これは、読み込み状態とフォールバック UI を処理する React.Suspense と組み合わせて使用されることがよくあります。以下は、React アプリケーションで遅延読み込みを実装する方法を理解するための重要な手順です。

React.js Lazy Loading: EXPLAINED
1. React.lazy

による動的インポート

React.lazy は、必要な場合にのみコンポーネントの動的インポートを有効にします。結果は、デフォルトの React コンポーネントを含むモジュールに解決される Promise です。

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

ログイン後にコピー

この例では、DelayedComponent は、React が最初にレンダリングを試みたときにのみロードされます。

2. React.Suspense でラッピング

読み込み状態を処理するには、React.Suspense を使用して遅延読み込みコンポーネントをラップします。これにより、コンポーネントの読み込み中にフォールバックコンテンツ (読み込みスピナーなど) を表示できます。

import React, { Suspense } from 'react'; function App() { return (  Loading content...
}>

); }

ログイン後にコピー

上記のスニペットでは、 DelayedComponent がロードされるまで待ってから表示します。読み込みに時間がかかる場合は、「コンテンツを読み込み中...」というメッセージが表示されます。

遅延読み込みでは、障害 (ネットワーク停止など) が発生した場合のエラー処理が不可欠です。読み込みプロセス中に問題が発生した場合は、エラーメッセージまたはフォールバックコンポーネントを表示できます。

遅延読み込みは、URL に基づいてさまざまな画面やコンポーネントが読み込まれるルーティングのコンテキストで特に役立ちます。 React Router のようなルーターを使用すると、React.lazy を使用して各ルートのコンポーネントを動的にロードできます。

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import React, { Suspense } from 'react'; const HomeView = React.lazy(() => import('./HomeView')); const AboutView = React.lazy(() => import('./AboutView')); function App() { return ( Loading views...