Wie ermöglichen Async-Komponenten Lazy Loading?

Question

Accepted Answer

**Async-Komponenten** ermöglichen es dir, den Code einer Komponente **nur dann zu laden, wenn er tatsächlich benötigt wird**, indem er in ein separates Bundle (Chunk) aufgeteilt wird, das bei Bedarf abgerufen wird. Dies reduziert das initiale JavaScript, das der Benutzer herunterlädt.

## Definieren einer Async-Komponente

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

Das dynamische `import()` teilt dem Bundler (Vite/webpack) mit, `HeavyChart.vue` in eine eigene Datei aufzuteilen, die lazy geladen wird, wenn die Komponente zum ersten Mal verwendet wird – nicht als Teil des Hauptbundles.

## Warum es wichtig ist

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

Große, selten genutzte Komponenten (Rich-Text-Editoren, Diagramme, Modale, Admin-Panels) müssen nicht im initialen Download enthalten sein. Das Lazy Loading verbessert die initiale Ladezeit und Core Web Vitals.

## Umgang mit Lade- und Fehlerzuständen

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

Diese erweiterte Form ermöglicht es dir, während des Abrufs einen Spinner anzuzeigen und bei Fehler ein Fallback – wichtig, da Lazy Loading eine (normalerweise kurze) Netzwerkverzögerung einführt.

## Häufige Kombination: Code-Splitting auf Route-Ebene

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

Lazy Loading von Route-Komponenten ist die häufigste und effektivste Verwendung – der Code jeder Seite wird nur geladen, wenn der Benutzer zu ihr navigiert.

## Warum es wichtig ist

Async-Komponenten sind Vues Mechanismus für **Code-Splitting** – die Schlüsseltechnik, um initiale Bundles klein zu halten, während eine App wächst.

Durch Lazy Loading schwerer oder routenspezifischer Komponenten bei Bedarf (mit optionaler Lade-/Fehler-UI) reduzierst du das JavaScript, das Benutzer anfangs herunterladen, und beschleunigst das erste Laden.

Es ist eine Standard- und hochgradig impactful Performance-Optimierung, besonders wenn sie auf Routes angewendet wird.