Paano komponenta async ke bar da aiki aur mai bugi?

Question

Accepted Answer

**Komponenta async** suna ba ka ikinci lambar component ina **kawai lokacin da ake bumuji sosai**, ta raba shi cikin paketa daban-daban (chunk) wanda ake kawo lokacin da ake bubugi. Wannan yana rage JavaScript na farko da mai bugi yayi saurin sauke.

## Me ya sa yake mahimmaci

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

Dynamic `import()` yana gaya wa bundler (Vite/webpack) da ya raba `HeavyChart.vue` cikin faili na kansa, ana karawa shi da jajirewa a lokacin farko da aka yi amfani da component — ba a matsayin wani ɓangare na paketa na farko ba.

Me ya sa yake mahimmaci don aiki

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

Manya, arar da ake amfani da su kadan (masu edita mai yawa-rubutu, zane, modals, panels masu waje) babu bugan sa a kadar saukin farko. Abubuwan da ke aiki lokacin da aka bugi sun dagule lokaci na kadar saukin farko da Core Web Vitals.

Sarrafa jiha lokaci jajirewa da kuskure

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

Wancan nau'in ci gaba ya bai ka nuna spinner yayin abin da ake kawo da kuma rubaɓu yayin kuskure — mahimmaci ne tun da abubuwan jajirewa lokaci ya shiga lokaci sadarwa (galibi a gajeriyar lokaci).

Haɗa mai amfani: rabon lambar sadarwa

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

Abubuwan jajirewa lambar sadarwa abu ne ya fi amfani da sakamako — lambar kura kowanne yana kawo kawai lokacin da mai bugi zai yi tafiya.

Me ya sa yake mahimmaci

Komponenta async shine tsarin Vue don **rabon lambar** — muhimmin dabarar gida lambar sakamako kamar yadda app ta ci gida.

Ci gida jiha manya ko samun lambar (tare da zaɓi lokaci jajirewa/rubaɓu UI), kana rage JavaScript da mai bugi yayi kawar lokacinya, saurin sauke na farko.

Itaji aikin aiki na daidai, matakai sakamako, lallai yayin da ake yi amfani da lambar.