遅延可能ビューとは？

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

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

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

   app.component.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 |
       

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