Reactによる遅延読み込みのガイド

プラトン再発行

フォロワー： 0

概要

大規模なReactアプリケーションを開発する場合、通常、多くの画像やビデオを使用し、サードパーティのパッケージ/ライブラリをインストールし、API呼び出しを行い、その他さまざまなことを行います。これにより、アプリケーションの読み込みにかかる時間が自然に長くなり、バンドルサイズが大きくなり、ユーザーエクスペリエンスが低下します。それはどこです 遅延読み込み 所定の位置に来ます。コンテンツを読み込むことができます ジャストインタイム、アプリケーションに表示される直前。

コンテンツがまだ表示されていないときにコンテンツをプリロードすることを回避し、すべてのリソースを表示されているコンテンツに集中させることができます。

このガイドでは、使用方法を見ていきます React.lazy() & React.Suspense 追加のライブラリをインストールすることなくコード分割を処理できるようにする遅延読み込みおよびコード分割機能を実装するため。

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

React Webアプリケーションを起動すると、通常、アプリケーション全体が一度にバンドルされ、Webアプリのページ全体、画像、コンテンツなどがすべて読み込まれるため、読み込み時間が遅くなり、パフォーマンスが全体的に低下する可能性があります。コンテンツのサイズとその時点でのインターネット帯域幅。

レイジーローディング 必要な場合にのみ特定のコンポーネントをロードできます。通常、私たちはまた実行します コード分割 コンテンツを遅延ロードできる論理コンポーネントに変換します。

たとえば、クリックするとさまざまなソースからの多くの情報を表示するダッシュボードページがある場合、これらのコンポーネントとページを遅延読み込みしておくのが常に最善です。これにより、ユーザーが必要または必要とする場合にのみ読み込まれます。

注：特大のバンドルに関連するパフォーマンスの問題を回避するという全体的な目標を持って動的にロードできる複数のバンドルにコードの大きなバンドルを吐き出すプロセスは、コード分割。これは、アプリ内のコードの量を減らすことなく実現されます。

要約すると、遅延読み込みを使用すると、コンポーネントや要素をオンデマンドでレンダリングできるため、アプリがより効率的になり、ユーザーエクスペリエンスが向上します。

注：シングルページアプリケーション （SPA） XNUMXつのドキュメント/ページ内にすべてのページとコンテンツを含めるように設計されています。そのため、SPAを開発するときに遅延読み込みが特に便利です。

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

これまで、遅延読み込みとは何か、実装することが重要である理由を見てきました。それでは、コード分割と遅延読み込みを簡単に実装できるXNUMXつのReact機能を使用して、Reactアプリケーションに実装する方法を見てみましょう。 React.lazy（） & React.サスペンス.

React.lazy() レンダリングを可能にする関数です 動的インポート 通常のコンポーネントと同じように。と一緒に動的インポートを使用する React.lazy() 画面にレンダリングする直前にコンポーネントをインポートできるようになります。注意すべき重要なことは、 React.lazy() 関数を引数として受け入れます–その関数は動的を呼び出す必要があります import() その体の中で。

React.Suspense フォールバックを指定できます 小道具 これは、として使用されるプレースホルダーコンテンツを取り込みます ローディングインジケータ すべての怠惰なコンポーネントがロードされている間。

インポートしたコンポーネントに遅延読み込みを実装する方法と、ルートに移動するまでページが読み込まれないようにルートに実装する方法を見てみましょう。

スタートガイド

Reactアプリケーションがあり、インポートしたとします。 About コンポーネントを Home:

import AboutUs from './About';

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <AboutUs />
      </div>
   );
};

export default Home;

これで、を利用して遅延読み込みを実装できます React.lazy():

import React from 'react';


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

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <AboutUs />
      </div>
   );
};
export default Home;

注： React.lazy() このように使用すると、 Promise 物体。その約束は、遅延ロードしたいReactコンポーネントを含むモジュールに解決されます default 書き出す。

を使用して遅延読み込みを実装しました React.lazy()、ただし、上記のコードは常に エラー 私たちの “React component suspended while rendering, but no fallback UI was specified”。これは、コンポーネントをでラップすることで修正できます React.Suspense〜の fallbackz 前に説明したように、フォールバックプロップを取り付けます。

ベストプラクティス、業界で認められた標準、および含まれているチートシートを含む、Gitを学習するための実践的で実用的なガイドを確認してください。グーグルGitコマンドを停止し、実際に学ぶそれ！

import React from 'react';
const AboutUs = React.lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <React.Suspense fallback={<div>Loading...</div>}>
            <AboutUs />
         </React.Suspense>
      </div>
   );
};
export default Home;

注：フォールバックプロップは、元のコンテンツが読み込まれる前に表示するコンポーネントを取得できます。

さらに、私たちはすることを決めることができます 構造を破壊する コードをよりクリーンで読みやすくするためのReactインポート：

import { lazy, Suspense } from 'react';
const AboutUs = lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <Suspense fallback={<div>Loading...</div>}>
            <AboutUs />
         </Suspense>
      </div>
   );
};
export default Home;

これまで、インポートしたコンポーネントに遅延読み込みを実装する方法を見てきました。それでは、Reactルーターでルーティングしながらルートに実装する方法を見てみましょう。

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

レイジールーティングは、実際には、コンテンツが多く、アプリケーションの読み込み時間が遅くなる可能性があるルートに適しています。 Reactルートに遅延読み込みを実装することは、動的にインポートされたコンポーネントを遅延読み込みするときに以前に行ったこととほぼ同じです。

Reactルートの遅延読み込みとは、必要な場合にのみコンポーネントを動的にインポートすることです。たとえば、アプリケーションにXNUMXつのルートがあり、それらのルートを表すXNUMXつのコンポーネントがあるとします。上記のルーティングを次のように実装すると、各コンポーネントは、対応するルートに移動したときにのみロードされます。

import { lazy, Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const Products = lazy(() => import('./Products'));

function App() {
   return (
      <BrowserRouter>
         <Suspense fallback={<div>Loading...</div>}>
            <Routes>
               <Route path="/" element={<Home />} />
               <Route path="/products" element={<Products />} />
            </Routes>
         </Suspense>
      </BrowserRouter>
   );
}
export default App;

まとめ

このガイドでは、遅延読み込みとコード分割とは何か、それらを実装する方法、および遅延読み込みを実装するのに最適な場所はルートを使用することであることを学びました。これにより、ページ全体を一度にレンダリングすることが回避され、大量のコンテンツを含むページを処理するときに読み込み時間が遅くなる可能性があります。

タイムスタンプ： 2022 年 6 月 15 日２０２２年７月１１日