Hvordan muliggør async-komponenter lazy loading?

Question

Accepted Answer

**Async-komponenter** lader dig indlæse en komponents kode **kun når det faktisk er nødvendigt**, ved at splitte det ind i et separat bundle (chunk), der hentes efter behov. Dette reducerer det initiale JavaScript, som brugeren downloader.

## Definering af 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
);
```

Det dynamiske `import()` fortæller bundleren (Vite/webpack) at splitte `HeavyChart.vue` ind i sin egen fil, som indlæses lazy første gang komponenten bruges — ikke som en del af hovedbundlet.

## Hvorfor det betyder noget for ydeevne

```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, sjældent brugte komponenter (rich-text-editorer, diagrammer, modaler, administratorpaneler) behøver ikke at være i den initiale download. Lazy-loading af dem forbedrer den initiale indlæsningstid og Core Web Vitals.

## Håndtering af indlæsnings- og fejltilstande

```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 avancerede form lader dig vise en spinner under hentningen og en fallback ved fejl — vigtig da lazy loading introducerer en (normalt kort) netværksforsinkelse.

## Almindeligt parring: kodeopsplitning på rute-niveau

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

Lazy-loading af rutekomponenter er den mest almindelige og impactful brug — hver sides kode indlæses kun når brugeren navigerer til den.

## Hvorfor det betyder noget

Async-komponenter er Vues mekanisme for **kodeopsplitning** — den vigtigste teknik til at holde initiale bundler små, efterhånden som en app vokser.

Ved at lazy-loade tunge eller rute-specifikke komponenter efter behov (med valgfri indlæsnings-/fejl UI), reducerer du det JavaScript, som brugere downloader på forhånd, hvilket fremskynder første indlæsning.

Det er en standard, høj-impact ydeevneoptimering, især når det anvendes på ruter.