क्या async कॉम्पोनेंट्स आलसी लोडिंग को कैसे सक्षम करते हैं?

Question

Accepted Answer

**Async कॉम्पोनेंट्स** आपको कॉम्पोनेंट के कोड को **केवल तब लोड करने देते हैं जब इसकी वास्तव में आवश्यकता होती है**, इसे एक अलग बंडल (chunk) में विभाजित करते हुए जो मांग पर लाया जाता है। यह उपयोगकर्ता द्वारा डाउनलोड किए गए प्रारंभिक JavaScript को कम करता है।

## यह महत्वपूर्ण क्यों है

एक async कॉम्पोनेंट परिभाषित करना

```js
import { defineAsyncComponent } from "vue";

// the component's code is only downloaded when it first renders
const HeavyChart = defineAsyncComponent(() =>
  import("./HeavyChart.vue")   // dynamic import → separate chunk
);
```

डायनामिक `import()` bundler (Vite/webpack) को बताता है कि `HeavyChart.vue` को अपनी फ़ाइल में विभाजित करें, जो कॉम्पोनेंट के पहली बार उपयोग किए जाने पर आलसी तरीके से लोड होता है — मुख्य बंडल के भाग के रूप में नहीं।

यह प्रदर्शन के लिए महत्वपूर्ण क्यों है

```text
Without lazy loading: main.js = app + HeavyChart + Editor + Modal + ... (huge, slow first load)
With lazy loading:    main.js = app only; HeavyChart.js loads when you open the chart
```

बड़े, शायद ही कभी उपयोग किए जाने वाले कॉम्पोनेंट्स (रिच-टेक्स्ट एडिटर, चार्ट, मोडल्स, एडमिन पैनल) को प्रारंभिक डाउनलोड में नहीं होने की आवश्यकता है। उन्हें आलसी-लोडिंग करना प्रारंभिक लोड समय और Core Web Vitals में सुधार करता है।

लोडिंग और त्रुटि स्थितियों को संभालना

```js
const HeavyChart = defineAsyncComponent({
  loader: () => import("./HeavyChart.vue"),
  loadingComponent: LoadingSpinner,  // shown while the chunk downloads
  errorComponent: ErrorDisplay,       // shown if the download fails
  delay: 200,                         // wait 200ms before showing the spinner
  timeout: 5000,                      // give up after 5s
});
```

यह उन्नत फॉर्म आपको फेच के दौरान एक spinner दिखाने और विफलता पर एक fallback दिखाने देता है — महत्वपूर्ण है क्योंकि आलसी लोडिंग एक नेटवर्क देरी (आमतौर पर संक्षिप्त) को पेश करता है।

सामान्य जोड़ी: route-स्तर का कोड विभाजन

```js
// Vue Router — each route loads its page component on demand
const routes = [
  { path: "/dashboard", component: () => import("./Dashboard.vue") },
];
```

Route कॉम्पोनेंट्स की आलसी-लोडिंग सबसे सामान्य और प्रभावशाली उपयोग है — प्रत्येक पृष्ठ का कोड केवल तब लोड होता है जब उपयोगकर्ता उस पर navigate करता है।

यह महत्वपूर्ण क्यों है

Async कॉम्पोनेंट्स Vue का **कोड विभाजन** तंत्र है — जैसे-जैसे एप्लिकेशन बढ़ता है, प्रारंभिक बंडलों को छोटा रखने की मुख्य तकनीक।

भारी या route-विशिष्ट कॉम्पोनेंट्स को मांग पर लोड करके (वैकल्पिक लोडिंग/त्रुटि UI के साथ), आप उपयोगकर्ताओं द्वारा शुरुआत में डाउनलोड किए गए JavaScript को कम करते हैं, पहली लोड को तेज़ करते हैं।

यह एक मानक, उच्च-प्रभाव प्रदर्शन अनुकूलन है, विशेष रूप से जब routes पर लागू किया जाता है।