Routing
Lazy Loading
Performance Optimization
💡 Lazy loading ek buffet jaisa hai jaha khana TABHI serve hota hai jab tum us section mein jaते ho — poora khana pehle se plate mein nahi (eager loading), sirf jo CHAHIYE, JAB chahiye.
Lazy loading kisi feature/route ka CODE tabhi download karta hai jab user ACTUALLY us route ko visit kare — initial page load bahut FAST hota hai (poora app ka code ek saath download nahi hota). loadComponent (standalone components ke liye) ya loadChildren (modules ke liye) se implement hota hai.
// Lazy-loaded standalone component:
export const routes: Routes = [
{
path: 'admin',
loadComponent: () => import('./admin/admin.component')
.then(m => m.AdminComponent)
// AdminComponent ka code SIRF tab download hoga
// jab user "/admin" visit kare
}
];
// Lazy-loaded module (older pattern):
// {
// path: 'admin',
// loadChildren: () => import('./admin/admin.module')
// .then(m => m.AdminModule)
// }⚡
Lazy loading ek buffet jaisa hai jaha khana TABHI serve hota hai jab tum us section mein jaते ho — poora khana pehle se plate mein nahi (eager loading), sirf jo CHAHIYE, JAB chahiye.
1 / 2
⚡ Quick Recap
- loadComponent/loadChildren = code sirf zaroorat par download
- Initial page load fast hota hai — poora app ek saath nahi load hota
- Bade apps mein huge performance improvement, especially rarely-used features ke liye
On this page (2 subtopics)
Preloading lazy-loaded modules ko BACKGROUND mein load karta hai (initial load ke BAAD, jab browser idle ho) — user ko FAST initial load milta hai, LEKIN jab wo actually us route par jaaye, code ALREADY ready hai (no delay).
import { PreloadAllModules } from '@angular/router';
// app.config.ts (standalone) ya app-routing.module.ts:
// provideRouter(routes, withPreloading(PreloadAllModules))
// Ya custom preloading strategy — sirf SPECIFIC routes preload karoTip: PreloadAllModules "sab kuch background mein preload karo" strategy hai — zyadatar apps ke liye achha default hai, ek balance deता hai fast-initial-load AUR fast-subsequent-navigation ke beech.
ng build --stat-json + webpack-bundle-analyzer se dekh sakte ho lazy loading ne actually kितना bundle size REDUCE kiya — bade apps mein ye measurement optimization decisions guide karta hai.
# Build with stats:
ng build --configuration production --stats-json
# Analyze:
npx webpack-bundle-analyzer dist/my-app/stats.jsonTip: Bundle analysis tools se pata chalta hai KAUNSA feature sabse zyada size le raha hai — usually bade third-party libraries (jaise chart libraries) sabse achhe lazy-loading candidates hote hain.