Hvordan aktiverer async-komponenter lat innlasting?

Question

Accepted Answer

**Async-komponenter** lar deg laste en komponents kode **kun når den faktisk trengs**, ved å dele den inn i en egen bundle (chunk) som hentes på etterspørsel. Dette reduserer mengden JavaScript som brukeren laster ned initialt.

## Definere en async-komponent

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

Den dynamiske `import()` forteller pakker (Vite/webpack) at `HeavyChart.vue` skal deles inn i sin egen fil, lastet lat første gang komponenten brukes — ikke som del av hovedbundlen.

## Hvorfor dette betyr noe for ytelsen

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

Store, sjelden brukte komponenter (tekstredigerere, grafer, modaler, administrasjonspaneler) trenger ikke å være i den innledende nedlastingen. Lat innlasting av dem forbedrer den innledende lastetiden og Core Web Vitals.

## Håndtere lastings- og feiltilstander

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

Denne avanserte formen lar deg vise en spinnere under hentingen og et reservealternativ ved feil — viktig siden lat innlasting introduserer en (vanligvis kort) nettverksdelay.

## Vanlig kombinasjon: kodesplitting på ruttenivå

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

Lat innlasting av ruttekomponenter er den vanligste og mest effektive bruken — hver sides kode lastes bare når brukeren navigerer til den.

## Hvorfor dette betyr noe

Async-komponenter er Vues mekanisme for **kodesplitting** — nøkkelteknikken for å holde innledende bundles små ettersom en app vokser.

Ved å laste tunge eller rutte-spesifikke komponenter på etterspørsel (med valgfri lasting-/feil-UI), reduserer du JavaScripten som brukerne laster ned fra starten, noe som akselererer den første belastningen.

Det er en standard, høypåvirkelses ytelses optimalisering, spesielt når den brukes på ruter.