mcpField
A
angular-performance

angular-performance

github.com/gentleman-programming開発661350 回インストール31 週間前に更新
リポジトリ

angular-performance について

Angular 開発者向けのパフォーマンスガイドスキルです。アプリの構築や最適化に役立つ、画像読み込み、遅延読み込み、ルーティング、レンダリングの方法をまとめています。

主な機能

  1. 01NgOptimizedImage による画像最適化
  2. 02@defer によるコンポーネントの遅延読み込み
  3. 03遅延ルートの設定
  4. 04SSR、CSR、SSG の選択
  5. 05計算の最適化とライフサイクル中の再レイアウト回避

活用シーン

  1. 01重要な画像の読み込み属性設定
  2. 02画面下のコンテンツの読み込み延期
  3. 03ページ要件に応じたレンダリング方式の選択

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/gentleman-programming/gentleman-skills --skill angular-performance

インストール後、Claude Code で/angular-performanceを入力して読み込まれたか確認します。

詳細

NgOptimizedImage（画像では必須）

import { NgOptimizedImage } from '@angular/common';

@Component({
  imports: [NgOptimizedImage],
  template: `
    
    <img ngSrc="hero.jpg" width="800" height="400" priority>
    
    
    <img ngSrc="thumb.jpg" width="200" height="200">
    
    
    <img ngSrc="bg.jpg" fill>
    
    
    <img ngSrc="photo.jpg" width="400" height="300" placeholder>
  `
})
ルール
  • 必ず width と height（または fill）を設定してください
  • LCP（Largest Contentful Paint）画像に priority を追加してください
  • src ではなく ngSrc を使用してください
  • fill 画像の親要素には position: relative/fixed/absolute を設定してください

@defer - 遅延コンポーネント

@defer (on viewport) {
  <heavy-component />
} @placeholder {
  <p>Placeholder shown immediately</p>
} @loading (minimum 200ms) {
  <spinner />
} @error {
  <p>Failed to load</p>
}
トリガー
トリガー使用するタイミング
on viewportスクロールしないと見えないコンテンツ
on interactionクリック／フォーカス／ホバー時に読み込む
on idleブラウザーがアイドル状態のときに読み込む
on timer(500ms)遅延後に読み込む
when condition式が true のときに読み込む

@defer (on viewport; on interaction) {
  <comments />
}


@defer (when showComments()) {
  <comments />
}

遅延ルート

// Single component
{
  path: 'admin',
  loadComponent: () => import('./features/admin/admin').then(c => c.AdminComponent)
}

// Feature with child routes
{
  path: 'users',
  loadChildren: () => import('./features/users/routes').then(m => m.USERS_ROUTES)
}

SSR とハイドレーション

bootstrapApplication(AppComponent, {
  providers: [
    provideClientHydration()
  ]
});
シナリオ使用する方式
SEO が重要（ブログ、eコマース）SSR
ダッシュボード／管理画面CSR
静的なマーケティングサイトSSG/Prerender

時間のかかる計算

解決策使用するタイミング
アルゴリズムの最適化常に最初の選択肢
純粋パイプ単一の結果をキャッシュ
メモ化複数の結果をキャッシュ
computed()派生シグナルの状態

ライフサイクルフック（ngOnInit、ngAfterViewInit）でリフロー／再描画を絶対に発生させないでください。

リソース

コメント

Markdown 対応