← Angular コース
11. @defer — 重い部分を後から読み込む
@defer は、テンプレートの一部の読み込みを必要になるまで遅らせる仕組みです。@defer { <app-heavy-chart /> } と囲むと、その中のコンポーネントのコードは最初のページ表示には含まれず、あとから別途読み込まれます。最初に表示されるJavaScriptが小さくなるため、ページの初期表示が速くなります。
実務では、グラフ・地図・コメント欄・動画プレイヤーのように「重いが最初は見えていなくてよい部品」を @defer で包みます。いつ読み込むかは条件で指定でき、@defer (on viewport) ならその部分が画面にスクロールで見えたとき、@defer (on interaction) ならユーザーが触れたとき、というように読み込みタイミングを選べます。
@defer には、読み込み中に出す @loading、まだ読み込みを始めていないときの @placeholder、失敗時の @error をセットで書けます。これらを用意しておくと、読み込みの間も画面がガタつかず、利用者にとって自然な見え方になります。
サンプルコード(フレームワーク環境が必要なため表示のみ)
import { Component } from '@angular/core';
import { HeavyChartComponent } from './heavy-chart.component';
@Component({
selector: 'app-dashboard',
imports: [HeavyChartComponent],
// 画面に見えたタイミング(on viewport)で初めて読み込む
template:
'@defer (on viewport) {' +
' <app-heavy-chart />' +
'} @placeholder {' +
' <p>グラフはここに表示されます</p>' +
'} @loading {' +
' <p>読み込み中...</p>' +
'}',
})
export class DashboardComponent {}