Why should you care?

Slow first load loses SaaS trials; teller apps on old PCs need snappy UI.

See it live — copy this example

Paste into your MeanVerse project (Angular + Express + MongoDB), then run with ng serve / node / mongosh as noted.

@Component({
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `@for (a of accounts(); track a.id) { <mv-row [account]="a" /> }`
})
export class AccountListComponent {
  accounts = input.required<Account[]>();
}
// build
// ng build --configuration production
// inspect dist/stats.json with webpack-bundle-analyzer

What happened?

• OnPush checks component only when inputs change.
• track in @for avoids DOM thrash.
• Production build tree-shakes and minifies.

Practice next

1. Enable OnPush on list-heavy components.
2. Use trackBy or track with stable id in loops.
3. Analyze bundle; remove unused lodash imports.
4. Add @angular/cdk/scrolling virtual viewport to long lists.
5. Split routes with loadComponent lazy chunks.

Remember

OnPush + track stabilize performance. Production builds enable tree shaking. Profile before micro-optimizing.

Branch teller tablets

Account grid had 2s lag with 300 rows.

Outcome: OnPush + virtual scroll cut render to under 100ms.