async components ले कसरी lazy loading सक्षम गरदछ?

Question

Accepted Answer

**Async components** ले तपाइँलाई एक component को code **केवल तब लोड गर्न** दिन्छ जब यो वास्तवमा आवश्यक हुन्छ, यसलाई अलग bundle (chunk) मा विभाजित गर्दै जुन माग अनुसार fetch गरिन्छ। यसले प्रारम्भिक JavaScript को मात्रा कम गर्दछ जुन उपयोगकर्ताले डाउनलोड गर्दछ।

## Async component परिभाषित गर्दै

```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` लाई आफ्नै फाइलमा विभाजित गर्न बताउँछ, जुन component पहिलो पटक प्रयोग हुँदा lazy रूपमा लोड गरिन्छ — मुख्य bundle को भाग नभएर।

## कार्यक्षमताको लागि यो किन महत्त्वपूर्ण छ

```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
```

ठूला, कम प्रयोग गरिने components (rich-text editors, charts, modals, admin panels) प्रारम्भिक डाउनलोडमा हुनु आवश्यक छैन। यसलाई lazy-load गर्दा प्रारम्भिक लोड समय र Core Web Vitals सुधर्दछ।

## लोडिंग र error states हल गर्दै

```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
});
```

यो उन्नत रूप तपाइँलाई fetch को समयमा spinner देखाउन र असफलतामा fallback देखाउन दिन्छ — यो महत्त्वपूर्ण छ किनकि lazy loading ले एक (सामान्यतः छोटो) network delay परिचय गरायो।

## सामान्य जोडी: route-level code splitting

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

Route components लाई lazy-load गर्नु सबैभन्दा सामान्य र प्रभावशाली प्रयोग हो — प्रत्येक page को code केवल तब लोड हुन्छ जब उपयोगकर्ता यसमा navigate गर्दछ।

## यो किन महत्त्वपूर्ण छ

Async components Vue को **code splitting** को तंत्र हो — एप्लिकेशन बढ्दा प्रारम्भिक bundles सानो राख्नको लागि मुख्य प्रविधि।

भारी वा route-specific components लाई माग अनुसार लोड गर्दा (वैकल्पिक loading/error UI सहित), तपाइँ उपयोगकर्ताहरूले अगाडि डाउनलोड गर्ने JavaScript को कटौती गर्दछ, पहिलो लोड गति बढाउँदै।

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