# लेज़ी लोडिंग — Angular Fundamentals: Components, Signals और Routing

Source: https://www.skillbyai.com/hi/angular/ng-lazy-loading

> loadComponent से route components को lazy load करके initial bundle छोटा करें।

## loadComponent

`loadComponent`, स्टैंडअलोन कंपोनेंट को डायनामिक रूप से import करता है, इसे अपने खुद के JS chunk में बाँटता है जो केवल राउट पर जाने पर लोड होता है।

```typescript
export const routes: Routes = [
  {
    path: 'settings',
    loadComponent: () =>
      import('./settings/settings.component').then(m => m.SettingsComponent),
  },
];
```

## यह क्यों ज़रूरी है

लेज़ी लोडिंग शुरुआती बंडल को छोटा रखता है — कम बार देखे जाने वाले पेज (सेटिंग्स, एडमिन पैनल) पहले पेज लोड को धीमा नहीं करते।

**Quiz:** सामान्य `component` राउट की तुलना में `loadComponent` का मुख्य फ़ायदा क्या है?

- [ ] यह राउट पैरामीटर छोड़ देता है
- [x] यह कंपोनेंट को अलग chunk में बाँटता है जो माँग पर लोड होता है
- [ ] यह router outlet को निष्क्रिय कर देता है
- [ ] यह router हटाता है

*Answer:* यह कंपोनेंट को अलग chunk में बाँटता है जो माँग पर लोड होता है. कंपोनेंट का कोड तभी डाउनलोड होता है जब उपयोगकर्ता वास्तव में उस राउट पर जाता है।