async components کیسے lazy loading کو سکریت کردے ہن؟

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

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

یہ اعلیٰ شکل آپ کو fetch کے دوران ایک spinner دکھانے اور ناکامی پر fallback دکھانے دیتا ہے — یہ اہم ہے کیونکہ سست لوڈنگ ایک (عام طور پر مختصر) نیٹ ورک تاخیر متعارف کراتی ہے۔

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

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

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

بھاری یا route-specific components کو مانگ پر لوڈ کر کے (اختیاری loading/error UI کے ساتھ)، آپ صارفین کے طریقے سے ابتدائی طور پر ڈاؤن لوڈ کیے جانے والے JavaScript کو کم کرتے ہیں، پہلی لوڈ کو تیز کرتے ہیں۔

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