Angular @defer インタラクティブな例

Angular 17で追加された素晴らしい機能の一つに、deferブロックがあります。これはコンポーネント、ディレクティブ、パイプを遅延ロードすることができ、さらには@deferを使ってテンプレートレベルで設定できます。

既に理論を知っていて、@deferで実際に手を動かしてみたい人のために、いろいろなユースケースと組み合わせが見れるアプリがこちらです：

アプリケーションが実行時にどのように@deferをトリガーし、どのバンドルがブラウザにロードされるのかを確認してみましょう。

内容には以下が含まれています：

⚡️ コンポーネント、ディレクティブ、パイプ
⚡️ 複数のトリガーとその組み合わせ
⚡️ 実用的なユースケース (🪗 アコーディオン、📦 npmパッケージなど多数)
⚡️ DevToolsで分析
⚡️ 説明も含む

実装されたユースケース：
⚡️ 条件時：@defer (isVisibleの時) {...}
⚡️ アイドル時：@defer (アイドル時) {...}
⚡️ ビューポート時：@defer (ビューポートに入った時) {...}
⚡️ インタラクション時：@defer (インタラクションがあった時) {...}
⚡️ ホバー時：@defer (ホバー時) {...}
⚡️ 即時：@defer (即座に) {...}
⚡️ タイマー時：@defer (タイマー(2000ms)が経った時) {...}
🪗 アコーディオン：@defer (ホバー時(アコーディオン); タイマー(5秒)が経った時) {...} (アコーディオンのセクションがクリックされる前)
👫 複数ディファー可
📦 npmパッケージ：<link rel="modulepreload" href="chunk-BYHJVGJ4.js">
🗃️ ネストしたdefer：@defer (タイマー(2秒)が経った時) { @defer (インタラクションがあった時) {...} }
⏱️ プリフェッチ：@defer (インタラクションがある時; アイドル時にプリフェッチ) {...}
🚚 ローディング vs プレースホルダー：最短500msのplaceholder {...} & 10ms後に最短1秒の@loading {...}
💥 deferエラー：@error {...}

では、ブラウザのDevToolsのNetworkタブを開いて、インタラクティブな例で遊んでみてください💪

フロントエンド（js、ts、react、angularなど）についての深掘りをもっと見たい場合は、私をTwitterでフォローしてください！

こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/this-is-angular/angular-defer-interactive-examples-10mn