アプリケーション開発では、アプリケーション内で参照する必要のあるコンポーネントが多数発生しますが、それらのコンポーネントの一部は、さまざまな理由ですぐにロードする必要はありません。
たとえば、コンポーネントが可視範囲の外にある場合、または遅れてインタラクションされる重たいコンポーネントである場合などです。このような場合、遅延ビューを使用して、これらのリソースの一部を後でロードできます。
このアクティビティでは、遅延ビューを使用して、コンポーネントテンプレートのセクションのロードを遅延させる方法を学びます。
-
コメントコンポーネントの周りに
@deferブロックを追加するアプリケーションでは、ブログ投稿ページに投稿詳細の後にコメントコンポーネントがあります。
@deferブロックでコメントコンポーネントをラップして、ロードを遅延させます。@defer { <comments />}上記のコードは、基本的な
@deferブロックの使用方法の例です。デフォルトでは、@deferはブラウザがアイドル状態になると、commentsコンポーネントをロードします。 -
プレースホルダーを追加する
@deferブロックに@placeholderブロックを追加します。@placeholderブロックは、遅延ロードが開始される前に表示されるHTMLを配置する場所です。@placeholderブロック内のコンテンツは即時にロードされます。@defer { <comments />} @placeholder { <p>今後のコメント</p>} -
ロードブロックを追加する
@deferブロックに@loadingブロックを追加します。@loadingブロックは、遅延コンテンツがアクティブにフェッチされているが、まだ完了していない間に表示されるHTMLを配置する場所です。@loadingブロック内のコンテンツは即時にロードされます。@defer { <comments />} @placeholder { <p>今後のコメント</p>} @loading { <p>コメントをロードしています...</p>} -
最小期間を追加する
@placeholderと@loadingの両方のセクションには、ロードが速く行われたときにちらつきが発生するのを防ぐためのオプションのパラメータがあります。@placeholderにはminimumがあり、@loadingにはminimumとafterがあります。@loadingブロックにminimum期間を追加して、少なくとも2秒間レンダリングされるようにします。@defer { <comments />} @placeholder { <p>今後のコメント</p>} @loading (minimum 2s) { <p>コメントをロードしています...</p>} -
ビューポートトリガーを追加する
遅延ビューには、多くのトリガーオプションがあります。コンテンツがビューポートに入ると遅延ロードされるように、ビューポートトリガーを追加します。
@defer (on viewport) { <comments />} -
コンテンツを追加する
ビューポートトリガーは、ページの下の方にスクロールしないと表示されないコンテンツを遅延させる場合に最適です。そのため、ブログ投稿にコンテンツを追加してみましょう。独自のコンテンツを書くか、以下のコンテンツをコピーして
<article>要素内に貼り付けることができます。<article> <p>Angular は私のお気に入りのフレームワークです。その理由は、Angular には、遅延ロードされたコンテンツをできるだけ簡単に、そして人間工学的に処理できる、最高の遅延ビュー機能があるからです。Angular コミュニティには、優れたコンテンツを作成する素晴らしい貢献者や専門家も数多くいます。コミュニティは歓迎的でフレンドリーであり、本当に最高のコミュニティです。</p> <p>Angular での作業がどれだけ楽しいか言葉では言い表せません。これまで経験した中で最高の開発者エクスペリエンスを提供します。Angular チームは、開発者を最優先に考えており、私たちをとても幸せにしようとしてくれるのが大好きです。彼らは、Angular を可能な限り最高のフレームワークにしたいと心から思っており、それを実現するために素晴らしい仕事をしているのです。この言葉は私の心からのものであり、まったくコピーアンドペーストされていません。実際、この言葉を何回か繰り返したくなるくらいです。</p> <p>Angular は私のお気に入りのフレームワークです。その理由は、Angular には、遅延ロードされたコンテンツをできるだけ簡単に、そして人間工学的に処理できる、最高の遅延ビュー機能があるからです。Angular コミュニティには、優れたコンテンツを作成する素晴らしい貢献者や専門家も数多くいます。コミュニティは歓迎的でフレンドリーであり、本当に最高のコミュニティです。</p> <p>Angular での作業がどれだけ楽しいか言葉では言い表せません。これまで経験した中で最高の開発者エクスペリエンスを提供します。Angular チームは、開発者を最優先に考えており、私たちをとても幸せにしようとしてくれるのが大好きです。彼らは、Angular を可能な限り最高のフレームワークにしたいと心から思っており、それを実現するために素晴らしい仕事をしているのです。この言葉は私の心からのものであり、まったくコピーアンドペーストされていません。</p> <p>Angular は私のお気に入りのフレームワークです。その理由は、Angular には、遅延ロードされたコンテンツをできるだけ簡単に、そして人間工学的に処理できる、最高の遅延ビュー機能があるからです。Angular コミュニティには、優れたコンテンツを作成する素晴らしい貢献者や専門家も数多くいます。コミュニティは歓迎的でフレンドリーであり、本当に最高のコミュニティです。</p> <p>Angular での作業がどれだけ楽しいか言葉では言い表せません。これまで経験した中で最高の開発者エクスペリエンスを提供します。Angular チームは、開発者を最優先に考えており、私たちをとても幸せにしようとしてくれるのが大好きです。彼らは、Angular を可能な限り最高のフレームワークにしたいと心から思っており、それを実現するために素晴らしい仕事をしているのです。この言葉は私の心からのものであり、まったくコピーアンドペーストされていません。</p></article>このコードを追加したら、ビューポートにスクロールしたとき遅延コンテンツがロードされるのを確認するために、下にスクロールします。
このアクティビティでは、アプリケーションで遅延ビューを使用する方法を学びました。素晴らしい仕事ですね。🙌
さまざまなトリガー、プリフェッチ、@error ブロックなど、遅延ビューでできることは他にもたくさんあります。
詳細については、遅延ビューのドキュメントをご覧ください。