Roadmap › Angular (2 → 21) › Module: Quality and Performance
Lessons in this course (16)
16. Performance optimisation
Advanced★ Must knowLesson 16 of 16
- OnPush everywhere + immutable data + signals; consider zoneless.
- Lazy load routes (
loadComponent/loadChildren) and@deferheavy blocks. trackin@for(ortrackBy) to avoid re-rendering lists.- Virtual scrolling (
cdk-virtual-scroll-viewport) for long lists. - Avoid function calls in templates (use
computed/pure pipes). - Unsubscribe (async pipe,
takeUntilDestroyed) to prevent leaks. - SSR + hydration (
@angular/ssr, incremental hydration) for first paint and SEO; prerender static routes. NgOptimizedImage(ngSrc) for images; budgets inangular.json; analyse bundles (ng build --stats-json+ esbuild/webpack analyzers).- Web Workers for heavy computation; preloading strategies.
- Production builds (AOT, tree-shaking, minification are default).