We can divide angular optimizations into 2 groups:
- Network optimizations: improve mostly the load time (latency / bandwidth)
- Runtime optimizations: improve runtime performance (change detection / rendering)
Network optimizations
-
Lazy loading (router)
-
Minification / Dead Code Elimination
-
Compression (gzip / brotli)
Resources:
- "Building an Angular Application for Production": blog.mgechev.com/2016/06/26/tree-shaking-angular2-production-build-rollup-javascript/
- "2.5X Smaller Angular Applications with Google Closure Compiler": blog.mgechev.com/2016/07/21/even-smaller-angular2-applications-closure-tree-shaking/
- hacks.mozilla.org/2015/11/better-than-gzip-compression-with-brotli/
-
AOT compilation
-
Pre-fetching Resources (preload, prefetch, preconnect, dns-prefetch, prerender)
- preload: download and cash asap (for resources now)
- prefetch: download and cash on idle (for next page resources)
- dns-prefetch: resolve dns before
- preconnect: connect to domain before
- prerender: asks browser load url address and prerender it on "invisible tab" (you know that user will go to this page)
-
Caching
-
Service Workers
Resources:
- Angular Service Worker (angular.io/guide/service-worker-intro) — Aims to automate the process of managing Service Workers. It also contains Service Worker for caching static assets and one for generating application shell: developers.google.com/web/updates/2015/11/app-shell?hl=en.
Runtime optimizations
-
OnPush CD + Immutable
-
Smart + Dumb components
-
Pure pipes instead of method calls in templates
-
Pure pipes with caching (
@memo
) -
*ngFor
withtrackBy
-
Async pipes
-
Detaching CD
-
Informative configurations: linting, bundle size budgets
-
Use enableProdMode
-
WebWorkers
-
SSR
-
Unsubscribe logic (takeUntil)
-
providedIn
Resources
- https://github.com/mgechev/angular-performance-checklist
- https://www.youtube.com/watch?v=WdSXDGtd9lY&ab_channel=AngularMeetupZurich
- (takeUntil) https://stackoverflow.com/questions/57007118/do-i-need-to-complete-takeuntil-subject-inside-ngondestroy
- (takeUntil) https://cartant.medium.com/rxjs-avoiding-takeuntil-leaks-fb5182d047ef