Kuinka asynkroniset komponentit mahdollistavat laiska lataamisen?

Question

Accepted Answer

**Asynkroniset komponentit** antavat sinun ladata komponentin koodia **vain kun sitä todellisuudessa tarvitaan**, jakamalla sen erilliseen bundleen (chunk), joka noudetaan tarpeen mukaan. Tämä vähentää alkuperäistä JavaScriptiä, jonka käyttäjä lataa.

## Asynkronisen komponentin määrittäminen

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

Dynaaminen `import()` kertoo bundlerille (Vite/webpack) jakaa `HeavyChart.vue` omaan tiedostoonsa, joka ladataan laiskasti komponentin ensimmäisellä käytöllä — ei osana pääbundlea.

## Miksi tämä on tärkeää suorituskyvylle

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

Suuret, harvoin käytetyt komponentit (monipuoliset tekstieditorit, kaaviot, modaalit, hallinnan paneeli) eivät tarvitse olla alkuperäisessä latauksessa. Niiden laiska lataaminen parantaa alkuperäistä latausaikaa ja Core Web Vitalsia.

## Lataus- ja virhetilojen käsittely

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

Tämä kehittynyt muoto antaa sinun näyttää spinner-kuvakkeen haun aikana ja varasuunnitelman virheen sattuessa — tärkeää, koska laiska lataaminen tuo mukanaan (yleensä lyhyen) verkon viiveen.

## Yleinen yhdistelmä: koodin jako reittitasolla

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

Reittikomponenttien laiska lataaminen on yleisin ja vaikuttavin käyttötapaus — jokaisen sivun koodi ladataan vain kun käyttäjä siirtyy sille.

## Miksi se on tärkeää

Asynkroniset komponentit ovat Vueen mekanismi **koodin jakamiselle** — keskeinen tekniikka alkuperäisten bundleiden pitämiseksi pieninä sovelluksen kasvaessa.

Lataamalla raskaat tai reittispesifiset komponentit laiskasti tarpeen mukaan (valinnaisen lataus-/virhe-käyttöliittymän kanssa), pienennät JavaScriptiä, jonka käyttäjät lataavat alusta, nopeuttaen ensimmäistä latausta.

Se on vakiomuotoinen, korkean vaikutuksen suorituskyvyn optimointi, erityisesti kun sitä käytetään reiteillä.