遅延可能ビューとは？

完全にレンダリングされたAngularページには、多くの異なるコンポーネント、ディレクティブ、パイプが含まれている場合があります。ページの特定の部分はユーザーにすぐに表示する必要がありますが、後で表示されるまで待つことができる部分もあります。 Angularの_遅延可能ビュー_は@defer構文を使用して、すぐに表示する必要のないページの部分のJavaScriptのダウンロードをAngularに待たせることで、アプリケーションの高速化に役立ちます。

このアクティビティでは、遅延可能ビューを使用してコンポーネントテンプレートのセクションのロードを遅延させる方法を学習します。

1. @deferブロックをテンプレートの一部分に追加する。

   app.tsで、@deferブロックでarticle-commentsコンポーネントをラップして、ロードを遅延させます。

   @defer {  <article-comments />}

   デフォルトでは、@deferはブラウザがアイドル状態のときにarticle-commentsコンポーネントをロードします。

   ブラウザの開発者コンソールで、article-comments-componentの遅延チャンクファイルが個別にロードされていることがわかります（ファイル名は実行ごとに変わる可能性があります）。

   Initial chunk files | Names | Raw sizechunk-NNSQHFIE.js | - | 769.00 kB |main.js | main | 229.25 kB |Lazy chunk files | Names | Raw sizechunk-T5UYXUSI.js | article-comments-component | 1.84 kB |

よくできました！あなたは遅延可能ビューの基本を学びました。