Conas a bhraistear comhpháirteanna asynchronous ag socrú fágáil uas?

Question

Accepted Answer

**Comhpháirteanna asynchronous** a thugann duit deis an chód comhpháirt a **ní dhéanfaidh ach a shíoruú nuair atá sé ar an sprioc i ndáiríre**, ag roinnt sé i bpáirc ar leith (chunk) a bhíonn fógtha ar éileamh. Laghdaíonn sé seo an JavaScript tosaigh a thairgid an úsáideoir.

## Cén fáth a bhíonn sé tábhachtach

A bhaint a shainiú comhpháirt asynchronous

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

An `import()` dinimiciúil a insíonn do bhundler (Vite/webpack) `HeavyChart.vue` a roinnt ina comhad féin, arna fhágáil go fánaiseach an chéad uair a bhíonn an comhpháirt in úsáid — ní mar chuid den bhunt-páirc.

Cén fáth a bhíonn sé tábhachtach do fheidhmíochta

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

Comhpháirteanna trom agus annamh-úsáidte (eagarthóirí saibhir-théacs, cairteanna, modálacha, painéal riaracháin) ní gá a bheith sa bhainíochta tosaigh. Socrúchán fánaiseach a fhabhraíonn an t-am socrúcháin tosaigh agus Core Web Vitals.

Bheartú na stáit uachta agus earráid

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

An fhoirm dháreireadh a ligean duit spinnéir a thaispeáint i rith an bhainíochta agus fallback ar theip — tábhachtach ó bhruig fágáil uas tugann moill gréasáin isteach (go tobann geal).

Páirim coitianta: codlatú cód ar leibhéal na mbealaigh

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

Fágáil uas comhpháirteanna bealaigh an ceann coitianta agus an ceann is tionchar — gach leathanach a chód ag socrú ach nuair a riomhnaíonn an úsáideoir ann.

Cén fáth a bhíonn sé tábhachtach

Comhpháirteanna asynchronous an meicníc Vue do **codlatú cód** — an teicníc lárnaideach chun páirc tosaigh a choimeád beag de réir mar a fhásann aip.

A bhreith ar éileamh comhpháirteanna trom nó speisialta-bealaigh (le comhéadan fágáil/earráid roghnach), laghdaíonn tú an JavaScript a thairgid úsáideoirí ar thús, ag gealadh an socrúchán tosaigh.

Is gealadh feidhmíochta caighdeánach agus ard-tionchar é, go speisialta nuair a chuirtear i bhfeidhm ar bhealach.