Hogyan engedélyezik az aszinkron komponensek a lusta betöltést?

Question

Accepted Answer

**Az aszinkron komponensek** lehetővé teszik, hogy az egy komponens kódját **csak akkor töltse be, amikor erre valóban szükség van**, egy külön csomagba (chunk) felosztva, amelyet igény szerint tölt le. Ez csökkenti azt a kezdeti JavaScriptet, amely a felhasználó letölt.

## Miért ez fontos

Egy aszinkron komponens meghatározása

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

A dinamikus `import()` megmondja a bundlernek (Vite/webpack), hogy osztja fel a `HeavyChart.vue` fájlt saját fájlba, amely lustán töltődik be az első alkalommal, amikor a komponenst használják — nem a fő csomag részeként.

Miért fontos ez a teljesítményre

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

A nagyobb, ritkán használt komponensek (gazdag szövegeditorok, diagramok, modálok, adminisztrációs panelek) nem szükségesek a kezdeti letöltésben. A lusta betöltés javítja a kezdeti betöltési időt és a Core Web Vitals.

Betöltési és hibakezelési állapot kezelése

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

Ez az fejlett forma lehetővé teszi, hogy megjelenítsen egy spinner-t a letöltés alatt, és egy tartalékot hiba esetén — fontos, mivel a lusta betöltés (általában rövid) hálózati késleltetést vezet be.

Gyakori párunk: útvonal szintű kódfelosztás

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

Az útvonal-komponensek lusta betöltése a leggyakoribb és legtöbb hatású — az egyes lapok kódja csak akkor töltődik be, amikor a felhasználó az adott oldalra navigál.

Miért ez fontos

Az aszinkron komponensek a Vue **kódfelosztásának** mechanizmusa — az az alapvető módszer, amely megtartja a kezdeti csomagokat kicsinek, ahogy az alkalmazás nő.

A nehéz vagy útvonal-specifikus komponenseket igény szerint betöltve (opcionális betöltési/hiba UI-val) csökkenti azt a JavaScriptet, amelyet a felhasználók az elején letöltenek, felgyorsítva az első betöltést.

Ez egy szokványos, nagy hatású teljesítményi optimalizálás, különösen ha útvonalakra alkalmazta.