What is Angular performance optimization techniques?

Angular performance optimization operates at multiple levels: 1. Change Detection: Use OnPush strategy widely; use Signals (Angular 16+) for fine-grained reactivity; avoid function calls in templates ({{ computedValue }} vs {{ compute() }} — function called every CD cycle); use trackBy in *ngFor: *ngFor="let item of items; trackBy: trackById" (prevents re-rendering unchanged items). 2. Bundle size: lazy load feature routes; use tree-shakeable providers (providedIn: "root"); import only needed parts of libraries (avoid importing full lodash — use specific imports); analyze bundles with webpack-bundle-analyzer; use standalone components (better tree-shaking than NgModules). 3. Rendering: Use virtual scrolling for large lists (CdkVirtualScrollViewport); defer loading non-critical content with @defer blocks; use @defer (on viewport) to load when visible; memoize expensive computations with memo or compute in lifecycle hooks not templates. 4. HTTP/Data: HTTP caching with shareReplay(1); use pagination; implement debounce on search inputs. 5. Assets: SSR/prerendering for initial load performance; service workers (PWA) for offline and caching; preload critical images; lazy-load images with loading="lazy". 6. Bundle optimization: AOT compilation (always in production); Terser for minification; enable source map explorer to identify large dependencies. 7. @defer blocks (Angular 17+): @defer (on idle) { <heavy-component/> } @placeholder { <spinner/> } — load components lazily with triggers: idle, viewport, interaction, hover, timer, when, on.