遅延読み込み（Lazy Loading）とは何か？必要になるまで処理を先送りする

遅延読み込みは、コードのチャンク、画像、コンポーネントなどのリソースの取得を、実際に必要になる瞬間まで先送りします。

ユーザーがページの一部しか見ないのに、すべてを最初に読み込むのは無駄です。遅延読み込みは処理を重要になるまで遅らせるため、初期読み込みは高速なままで、使われないリソースは決して取得されません。これはcode splittingを介してJavaScriptに、ブラウザのネイティブサポートを介して画像に、オンデマンドの取得を介してデータに適用されます。buildは、遅延読み込みが依存する分割可能な部分を用意します。

コードの遅延読み込み

動的importにより、ルートやコンポーネントが使われるときにのみ読み込まれるようになります。バンドラーはそれをオンデマンドで取得される別のチャンクに変えるため、めったに使われないページを訪れても、誰かがそこに行くまでコストはかかりません。

画像の遅延読み込み

loading="lazy" 属性により、ブラウザは画面外の画像を、ユーザーがその近くまでスクロールするまで先送りできます。これはJavaScriptなしで初期帯域幅を削減し、読み込みの指標を改善します。

メリット

初期ダウンロードが小さくなり、first paintが速くなる。
見られないコンテンツのリソースは決して取得されない。
帯域幅とCDNコストが低くなる。

待ち時間を考慮した設計

lazyなリソースはトリガーの後に届くため、読み込み用のプレースホルダーやskeletonでその隙間を扱う必要があります。アイドル時間中に必要になりそうなチャンクをprefetchすることで、よくあるパスの遅延を隠せます。

CI/CDにおける遅延読み込み

コードの遅延読み込みはbuildが別々のチャンクを生成することに依存するため、pipelineは遅延読み込みされる各チャンクをキャッシュ用にcontent hash付きで出力・アップロードします。CIのbundle分析ステップにより、重いfeatureが実際にメインバンドルではなく独自のチャンクに入ったことを確認できます。

重要なポイント

遅延読み込みは、コード・画像・データを必要になるまで先送りします。
分割可能なチャンクと、ブラウザのネイティブな画像の遅延読み込みに依存します。
CIでのbundle分析により、重いfeatureが初期バンドルに入っていないことを確認できます。