@deferによる遅延読み込み
@deferでテンプレートのセクションを遅延読み込みします。
「@deferによる遅延読み込み」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
defer による遅延読み込み
at-defer ブロックは、テンプレートの一部とその依存関係を遅延読み込みし、初期読み込みのパフォーマンスを向上させます。遅延されるコンテンツは別のチャンクに分割されます。
基本的な defer 構文
コンテンツを at-defer ブロックで囲みます。デフォルトでは、ブラウザーがアイドル状態になったときに読み込まれます。
// @defer {
// <app-heavy-chart></app-heavy-chart>
// }defer を使う理由
負荷の大きいコンポーネントや、スクロールしないと見えない位置にあるコンポーネントの読み込みを遅延させると、初期バンドルを小さく保ち、ファーストペイントを高速化できます。コンポーネントは実際に必要になったときだけ読み込まれます。
placeholder ブロック
at-placeholderブロックは、遅延ブロックがトリガーされる前のコンテンツを表示します。
// @defer {
// <app-comments></app-comments>
// } @placeholder {
// <p>Comments will load soon</p>
// }ローディングブロック
at-loadingブロックは、遅延チャンクの取得中に表示されます。
// @defer {
// <app-comments></app-comments>
// } @loading {
// <p>Loading comments...</p>
// }エラーブロック
遅延依存関係の読み込みに失敗した場合、at-errorブロックが描画されます。
// @defer {
// <app-comments></app-comments>
// } @error {
// <p>Failed to load comments</p>
// }トリガー
on句のトリガーを使うと、読み込みを開始するタイミングを制御できます。たとえば、on idle、on viewport、on interaction、on hover、on timerなどがあります。
// @defer (on viewport) {
// <app-chart></app-chart>
// }on viewport
on viewportトリガーは、コンテンツがビューポート内にスクロールされて表示されたときに読み込みます。スクロールせずには見えない位置のセクションに最適です。
on interactionとon hover
on interactionは、ユーザーがプレースホルダーをクリックするかフォーカスしたときに読み込みます。on hoverは、ポインターをその上に重ねたときに読み込みます。
// @defer (on interaction) {
// <app-editor></app-editor>
// } @placeholder {
// <button>Open editor</button>
// }when条件
whenを使ってブール式に基づくトリガーも設定できます。式がtrueになると読み込みが開始されます。
// @defer (when shouldLoad()) {
// <app-details></app-details>
// }プリフェッチ
遅延チャンクは、描画とは別にプリフェッチできます。たとえば、アイドル時にプリフェッチしておけば、描画トリガーが発生する前に準備を整えられます。
// @defer (on viewport; prefetch on idle) {
// <app-chart></app-chart>
// }クイックチェック: defer
遅延コンテンツをトリガーする。
まとめ: 遅延読み込み
遅延読み込みに使用するat-deferブロックと、at-placeholder、at-loading、at-errorブロックについて学びました。また、on idle、on viewport、on interaction、on hover、on timer、whenなどのトリガーと、プリフェッチについても学びました。Built-in Control Flowコースを修了しました。
よくある質問
「@deferによる遅延読み込み」レッスンは無料ですか？
はい。「@deferによる遅延読み込み」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「@deferによる遅延読み込み」で何を学びますか？
@deferでテンプレートのセクションを遅延読み込みします。 ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「@deferによる遅延読み込み」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- @ifによる条件付きレンダリング
- @forによるループ
- @switchによる切り替え
- @deferによる遅延読み込み