# लेज़ी लोडिंग — एंगुलर

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

> किसी राउट के कंपोनेंट को केवल तभी लोड करें जब उस पर जाया जाए।

## 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 को निष्क्रिय कर देता है

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