Hoe schakelen async-componenten lazy loading in?

Question

Accepted Answer

**Async components** laten je de code van een component **alleen laden wanneer deze daadwerkelijk nodig is**, door deze in een afzonderlijke bundle (chunk) in te delen die op aanvraag wordt opgehaald. Dit beperkt de hoeveelheid JavaScript die de gebruiker initieel downloadt.

## Een async-component definiëren

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

De dynamische `import()` vertelt de bundler (Vite/webpack) om `HeavyChart.vue` in een eigen bestand in te delen, dat lazy wordt geladen zodra de component voor het eerst wordt gebruikt — niet als onderdeel van de hoofdbundle.

## Waarom het belangrijk is

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

Grote, zelden gebruikte componenten (rich-text editors, grafieken, modale schermen, beheerpanels) hoeven niet in de initiële download te zitten. Het lazy-loaden ervan verbetert de initiële laadtijd en Core Web Vitals.

## Laad- en fouttoestanden afhandelen

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

Dit geavanceerde formulier laat je een spinner tonen tijdens het ophalen en een terugvaloptie bij een fout — belangrijk omdat lazy loading een (meestal korte) netwerkvertraging introduceert.

## Veelgebruikte combinatie: codesplitting op routeniveau

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

Het lazy-loaden van routecomponenten is het meest veelgebruikte en effectieve gebruik — de code van elke pagina wordt alleen geladen wanneer de gebruiker ernaartoe navigeert.

## Waarom het belangrijk is

Async components zijn Vue's mechanisme voor **code splitting** — de sleuteltechniek voor het klein houden van initiële bundles naarmate een app groeit.

Door zware of route-specifieke componenten op aanvraag in te laden (met optionele laad-/fouterinterface), verminder je de JavaScript die gebruikers initieel downloaden, wat de eerste laadtijd versnelt.

Het is een standaard, zeer effectieve prestatie-optimalisatie, vooral wanneer toegepast op routes.