पाठ 16 / 32

लेज़ी लोडिंग

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

loadComponent

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

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

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

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

त्वरित जाँच: सामान्य `component` राउट की तुलना में `loadComponent` का मुख्य फ़ायदा क्या है?

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

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