async components کم لوڈنگ کو کیسے فعال کرتے ہیں?

Question

Accepted Answer

**Async components** آپ کو کسی component کے code کو **صرف اس وقت لوڈ کرنے دیتے ہیں جب اس کی واقعی ضرورت ہو**، اسے ایک الگ bundle (chunk) میں تقسیم کرتے ہوئے جو ضرورت پر فیچ کیا جاتا ہے۔ یہ صارف کے ذریعے ڈاؤن لوڈ کی جانے والی ابتدائی 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
);
```

dynamic `import()` bundler (Vite/webpack) کو `HeavyChart.vue` کو اپنی فائل میں تقسیم کرنے کے لیے کہتا ہے، جو component کے پہلی بار استعمال کے وقت lazily لوڈ ہوتی ہے — main 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
});
```

yہ جدید شکل آپ کو fetch کے دوران spinner دکھانے اور ناکامی پر fallback دکھانے دیتی ہے — یہ اہم ہے کیونکہ lazy loading ایک (عام طور پر مختصر) نیٹ ورک تاخیر متعارف کراتا ہے۔

## عام جوڑی: 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 کرنا سب سے عام اور اثر انگیز استعمال ہے — ہر صفحہ کا code صرف اس وقت لوڈ ہوتا ہے جب صارف اس تک navigate کرتا ہے۔

## یہ کیوں اہم ہے

Async components Vue کا **code splitting** کے لیے mechanism ہے — ابتدائی bundles کو چھوٹا رکھنے کی کلیدی تکنیک جیسے جیسے ایک app بڑا ہوتا ہے۔

بھاری یا route-specific components کو ضرورت پر لوڈ کر کے (optional loading/error UI کے ساتھ)، آپ صارفین کے ذریعے شروعات میں ڈاؤن لوڈ کی جانے والی JavaScript کو کم کرتے ہیں، جو پہلے لوڈ کو تیز کرتا ہے۔

یہ ایک معیاری، زیادہ اثر انگیز کارکردگی کی بہتری ہے، خاص طور پر جب routes پر لاگو کیا جائے۔