angular-performance

Angular のパフォーマンス

バージョン： Angular 21（2025） タグ： パフォーマンス、最適化、バンドルサイズ、変更検知

参考資料： パフォーマンスガイド • 変更検知

API の変更

このセクションでは、最近のバージョン固有の API の変更について説明します。

• NEW：ゾーンレス変更検知 — zone.js を無効にしてパフォーマンスを向上させます source

• NEW：遅延可能ビュー（@defer）— コンポーネントのコードを遅延読み込みします

• NEW：シグナルベースのリアクティビティ — zone.js の代わりにシグナルを使用します

• NEW：afterNextRender — zone.js を使わずに、レンダリング後にコードを実行します

ベストプラクティス

• OnPush 変更検知戦略を使用します

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  // ...
})
export class MyComponent {}

• @for で trackBy を使用します

@Component({
  template: `
    @for (item of items; track item.id) {
      {{ item.name }}
    }
  `
})
export class MyComponent {}

• ルートに遅延読み込みを使用します

const routes: Routes = [
  {
    path: 'dashboard',
    loadComponent: () => import('./dashboard/dashboard.component').then(m => m.DashboardComponent)
  }
];

• 遅延読み込みには @defer を使用します

@Component({
  template: `
    @defer (on viewport) {
      <heavy-chart-component />
    } @placeholder {
      <div>Loading...</div>
    }
  `
})
export class MyComponent {}

• @for ループで trackBy を使用します

@for (item of items; track item.id) {
  <li>{{ item.name }}</li>
}

• 純粋パイプを使用します

@Pipe({
  name: 'myPipe',
  pure: true // Default - only runs when input changes
})
export class MyPipe implements PipeTransform {}

• テンプレート内での関数呼び出しを避けます

// ❌ Bad
{{ calculateTotal() }}

// ✅ Good
{{ total }}

• 画像には ngSrc を使用します

<img [ngSrc]="imageUrl" width="100" height="100" priority>

• 必要に応じて ChangeDetectionRef を手動で使用します

constructor(private cdr: ChangeDetectorRef) {}

updateData() {
  this.data = newData;
  this.cdr.detectChanges();
}

• サードパーティーライブラリには runOutsideAngular を使用します

import { runOutsideAngular } from '@angular/core/zone';

onClick() {
  runOutsideAngular(() => {
    this第三方Lib.doSomething();
  });
}

• provideZonelessChangeDetection を使用します

export const appConfig: ApplicationConfig = {
  providers: [
    provideZonelessChangeDetection()
  ]
};

• 初期化には afterNextRender を使用します

constructor() {
  afterNextRender(() => {
    // Runs after rendering, outside zone
  });
}

• バンドルサイズを最適化します

# Analyze bundle
ng build --stats-json
npx webpack-bundle-analyzer dist/stats.json

• スタンドアロンコンポーネントを使用します

@Component({
  standalone: true,
  imports: [CommonModule],
  // ...
})
export class MyComponent {}