How do you optimize an Angular app for performance?

Optimizing an Angular app for performance involves both build-time and run-time strategies. Here's a comprehensive breakdown:

🚀 Top Angular Performance Optimization Techniques

🔧 1. Use Ahead-of-Time (AOT) Compilation

• Compiles your code before the browser loads it.

• Reduces bundle size and improves startup time.

ng build --prod

(AOT is enabled by default in production mode.)

📦 2. Enable Production Mode

• Disables development-specific checks and change detection warnings.

import { enableProdMode } from '@angular/core';

if (environment.production) {
  enableProdMode();
}

🌳 3. Tree Shaking & Lazy Loading

• Tree shaking removes unused code during build.

• Lazy loading defers loading feature modules until they're needed.

const routes: Routes = [
  { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }
];

🐢 4. Avoid Unnecessary Change Detection

• Use ChangeDetectionStrategy.OnPush for components where inputs are immutable.

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush
})

🧼 5. Optimize Template Expressions

• Keep expressions in templates simple and fast.

• Avoid calling functions in templates (they get called on every change detection).

<!-- Avoid this -->
{{ computeValue() }}

<!-- Better -->
{{ cachedValue }}

📍 6. TrackBy in ngFor

• Prevents Angular from re-rendering entire lists unnecessarily.

<li *ngFor="let item of items; trackBy: trackById"></li>

trackById(index: number, item: any) {
  return item.id;
}

💾 7. Preload Critical Resources & Use Lazy Loading Wisely

• Use PreloadAllModules strategy to preload non-critical modules in the background.

RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })

🧱 8. Minimize Bundle Size

• Use tools like source-map-explorer to analyze your bundles:

npm install -g source-map-explorer
source-map-explorer dist/main.js

• Remove unused imports, third-party packages, and polyfills.

📉 9. Optimize Images & Assets

• Use optimized image formats (webp, avif)

• Lazy-load large images and components

🧪 10. Use Service Workers (PWA)

• Enable caching with Angular Service Workers to serve files faster.

ng add @angular/pwa

✅ Bonus Tips

• Avoid memory leaks by unsubscribing from observables.

• Use trackBy, async pipe, and debounceTime in forms and search inputs.

• Avoid frequent console.log() in production.