Async components काय प्रकारे lazy loading सक्षम करतात?

Question

Accepted Answer

**Async components** आपल्याला एका component च्या code ला **फक्त जेव्हा ते खरेच आवश्यक असेल तेव्हा** load करू देतात, त्याला एका वेगळ्या bundle (chunk) मध्ये split करून जो on demand fetch केला जातो. हे user ने download करणारा initial 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` ला त्याच्या स्वतःच्या फाईलमध्ये split करावे, जो पहिल्यांदा component वापरला जेतो तेव्हा lazily load होते — main bundle च्या भागाप्रमाणे नाही.

## Performance साठी हे का महत्त्वाचे आहे

```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) initial download मध्ये असणे आवश्यक नाही. त्यांना lazy-load करणे initial load time आणि Core Web Vitals सुधारते.

## Loading आणि 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
});
```

हा advanced form आपल्याला fetch च्या दरम्यान एक spinner दाखवू देते आणि अपयशावर एक fallback दाखवू देते — महत्त्वाचे कारण lazy loading एक (सामान्यतः संक्षिप्त) network delay परिचय करते.

## सामान्य pairing: 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 ला फक्त तेव्हाच load होते जेव्हा user त्याकडे navigate करतो.

## हे का महत्त्वाचे आहे

Async components हे Vue चे **code splitting** साठीचे यंत्रणा आहे — app जसजस वाढत जाते तसतस initial bundles लहान ठेवण्यासाठी मुख्य तंत्र.

भारी किंवा route-specific components ला on demand load करून (optional loading/error UI सह), आप users ने अगोदर download केलेला JavaScript कमी करता, पहिल्या load ला गती देता.

हे एक standard, high-impact performance optimization आहे, विशेषतः जेव्हा routes ला लागू केले जाते तेव्हा.