Angular Lazy Loading Modules application performance और scalability improve करने का एक critical concept है। Lazy loading का मतलब है कि application के सभी modules initial load पर download न होकर, जरूरत पड़ने पर load हों। इससे initial bundle size कम होता है और application fast open होती है।
इस chapter में हम Angular Lazy Loading Modules को beginner से advanced understanding तक detail में cover करेंगे, with clear routing-based examples।
Lazy Loading क्या है
Lazy loading एक optimization technique है जिसमें:
- Feature modules on-demand load होते हैं
- Initial application load fast होता है
- Large applications scalable बनती हैं
Angular Router lazy loading को built-in support देता है।
Eager Loading vs Lazy Loading
Eager Loading:
- All modules startup पर load
- Simple apps के लिए fine
- Large apps में slow startup
Lazy Loading:
- Only required modules load
- Faster initial render
- Better performance
Enterprise Angular apps lazy loading heavily use करती हैं।
Lazy Loading का Basic Idea
Angular Router route के साथ module को load करता है।
{
path: 'admin',
loadChildren: () =>
import('./admin/admin.module').then(m => m.AdminModule)
}
AdminModule तब load होगा जब user /admin route visit करेगा।
Lazy Loading Setup Structure
Typical structure:
- app-routing.module.ts
- feature module (admin.module.ts)
- feature routing module
Lazy modules always routing-based होते हैं।
Feature Module Routing Configuration
Admin module में:
const routes: Routes = [
{ path: '', component: AdminDashboardComponent }
];
@NgModule({
imports: [RouterModule.forChild(routes)],
declarations: [AdminDashboardComponent]
})
export class AdminModule {}
यह route /admin के under attach हो जाता है।
forRoot vs forChild Revisited
Lazy-loaded modules में:
RouterModule.forChild()mandatory हैforRoot()सिर्फ root module में होता है
Wrong usage routing crash कर सकता है।
Standalone Components के साथ Lazy Loading
Modern Angular में modules के बिना भी lazy loading possible है।
{
path: 'profile',
loadComponent: () =>
import('./profile/profile.component').then(c => c.ProfileComponent)
}
यह component-level lazy loading है।
Lazy Loading Standalone Routes
{
path: 'settings',
loadChildren: () =>
import('./settings/routes').then(r => r.SETTINGS_ROUTES)
}
यह modern, NgModule-free approach है।
Preloading Strategy
Lazy modules default रूप से demand पर load होते हैं।
Angular preloading support करता है।
RouterModule.forRoot(routes, {
preloadingStrategy: PreloadAllModules
})
App idle होने पर lazy modules background में load हो जाते हैं।
Custom Preloading Strategy Concept
Angular custom preloading allow करता है।
- High priority modules preload
- Rare modules skip
यह advanced optimization technique है।
Lazy Loading और Application Size
Benefits:
- Smaller main bundle
- Faster Time to Interactive
- Reduced memory usage
Lazy loading mobile users के लिए especially important है।
Lazy Loading और Guards
Lazy-loaded module पर guards apply हो सकते हैं।
{
path: 'admin',
canLoad: [AuthGuard],
loadChildren: () =>
import('./admin/admin.module').then(m => m.AdminModule)
}
canLoad unauthorized users के लिए module load होने से रोकता है।
canLoad vs canActivate
canLoad: module load रोकता हैcanActivate: route activation रोकता है
Sensitive modules के लिए canLoad better होता है।
Lazy Loading और Services Scope
Lazy module की services:
- Default रूप से module-scoped होती हैं
- Root services से isolated रहती हैं
@Injectable({ providedIn: 'root' })
Global scope ke liye required होता है।
Multiple Lazy Modules Structure
Large apps में:
- AuthModule
- AdminModule
- DashboardModule
Har feature independent lazy load होता है।
Common Lazy Loading Mistakes
- Feature module ko AppModule में import करना
- forRoot use करना
- SharedModule misuse
- Circular dependencies
Lazy loading break होने का main reason structure issues होते हैं।
Debugging Lazy Loading
Debug tools:
- Network tab (chunk loading)
- Angular DevTools
- enableTracing router option
Lazy module chunk load होते हुए clearly दिखते हैं।
Lazy Loading और SEO
Client-side lazy loading SEO के लिए:
- SSR के साथ combine करना चाहिए
- Angular Universal support करता है
SSR ke bina crawlers content miss कर सकते हैं।
Real-World Use Cases
Lazy loading best suited है:
- Admin dashboards
- Role-based sections
- Large feature sets
- Multi-tenant apps
Angular Lazy Loading Modules application architecture को scalable और performant बनाते हैं। अगले chapter में हम Route Guards cover करेंगे, जहाँ routing security और access control detail में समझेंगे।