0Pricing
Vue Academy · Lektion

Asynchrone Komponenten mit defineAsyncComponent

defineAsyncComponent(), loadingComponent, errorComponent sowie Optionen für delay und timeout

Asynchrone Komponenten mit defineAsyncComponent ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum asynchrone Komponenten

Mit defineAsyncComponent können Sie eine Komponente verzögert laden — ihr Code wird erst abgerufen, wenn die Komponente zum ersten Mal gerendert wird.

Damit wird Code-Splitting auf Routen- und Komponentenebene ermöglicht, wodurch Ihr initiales Bundle kleiner wird und der erste Paint schneller erfolgt.

Die Form mit der Loader-Funktion

Bei der einfachsten Verwendung übergeben Sie eine Loader-Funktion, die einen dynamischen import() zurückgibt. Vite/webpack teilt diesen Import automatisch in einen eigenen Chunk auf.

<script setup>
import { defineAsyncComponent } from 'vue'

const SettingsModal = defineAsyncComponent(() =>
  import('./SettingsModal.vue')
)
</script>

<template>
  <SettingsModal v-if="showSettings" />
</template>

Die Form mit dem Optionsobjekt

Für eine genauere Steuerung übergeben Sie ein Optionsobjekt. Die wichtigsten Felder sind:

  • loader — die Funktion für den dynamischen Import
  • loadingComponent — wird während des Ladens angezeigt
  • errorComponent — wird angezeigt, wenn das Laden fehlschlägt
  • delay / timeout — steuern das Timing
import { defineAsyncComponent } from 'vue'
import Loading from './Loading.vue'
import ErrorView from './ErrorView.vue'

const AsyncChart = defineAsyncComponent({
  loader: () => import('./Chart.vue'),
  loadingComponent: Loading,
  errorComponent: ErrorView,
  delay: 200,
  timeout: 5000
})

delay: Aufblitzen des Ladeindikators vermeiden

Die Option delay (standardmäßig 200 ms) gibt an, wie lange Vue wartet, bevor die loadingComponent angezeigt wird. Wird der Chunk schneller als die Verzögerung geladen, erscheint überhaupt kein Ladeindikator.

Setzen Sie delay: 0, um den Ladezustand sofort anzuzeigen.

const AsyncPanel = defineAsyncComponent({
  loader: () => import('./Panel.vue'),
  loadingComponent: Spinner,
  // wait 300ms before showing Spinner
  delay: 300
})

timeout: Zu langsame Ladevorgänge abbrechen

Die Option timeout legt die maximale Wartezeit fest. Wird der Loader nicht innerhalb von timeout ms aufgelöst, wird die errorComponent angezeigt und ein Fehler protokolliert.

Standardmäßig gibt es kein Timeout — der Ladevorgang wartet unbegrenzt.

const AsyncReport = defineAsyncComponent({
  loader: () => import('./Report.vue'),
  errorComponent: ErrorView,
  // fail if not loaded within 10s
  timeout: 10000
})

Der onError-Callback

Der onError-Handler wird ausgeführt, wenn der Loader abgelehnt wird. Er erhält den Fehler, eine retry-Funktion, eine fail-Funktion und die aktuelle Anzahl der Versuche.

Hier implementieren Sie eine Retry-Logik mit begrenzter Anzahl von Versuchen für instabile Netzwerke.

const AsyncWidget = defineAsyncComponent({
  loader: () => import('./Widget.vue'),
  onError(error, retry, fail, attempts) {
    if (attempts <= 3) {
      retry()   // try loading again
    } else {
      fail()    // give up, show errorComponent
    }
  }
})

Entscheidung zwischen Retry und Fail

Innerhalb von onError müssen Sie genau eine der Funktionen retry() oder fail() aufrufen (oder keine, was ebenfalls fehlschlägt). Eine übliche Strategie besteht darin, Netzwerkfehler einige Male erneut zu versuchen, bei einem Syntax- oder Chunk-Fehler jedoch sofort abzubrechen, da ein erneuter Versuch diesen nicht beheben kann.

onError(error, retry, fail, attempts) {
  const isNetwork = /Loading chunk/.test(error.message)
  if (isNetwork && attempts <= 2) {
    retry()
  } else {
    fail()
  }
}

Kombination mit Suspense

Wenn sich eine asynchrone Komponente innerhalb einer Suspense-Boundary befindet, steuert die Boundary stattdessen den Ladezustand. In diesem Fall wird die eigene loadingComponent der Komponente ignoriert — der Fallback von Suspense hat Vorrang.

<template>
  <Suspense>
    <AsyncChart />  <!-- loadingComponent ignored here -->
    <template #fallback>Loading chart...</template>
  </Suspense>
</template>

Benannte Chunks zur Fehlerbehebung

Sie können den generierten Chunk mit einem Magic Comment benennen. Dadurch lassen sich Netzwerkanfragen und Bundle-Berichte leichter lesen.

const AsyncEditor = defineAsyncComponent(() =>
  import(
    /* webpackChunkName: "editor" */
    './RichTextEditor.vue'
  )
)

Asynchrone Komponenten und Props

Asynchrone Komponenten akzeptieren Props und lösen Ereignisse genau wie normale Komponenten aus. Vue leitet alles transparent weiter, sobald die tatsächliche Komponente aufgelöst ist — Sie müssen die Aufrufstelle nicht ändern.

<template>
  <AsyncProfile
    :user-id="id"
    @save="handleSave"
  />
</template>

<!-- AsyncProfile resolves to the real component, props/events pass through -->

Best Practice: Lazy Loading oberhalb des sichtbaren Bereichs mit Bedacht einsetzen

Laden Sie Komponenten verzögert, die sich außerhalb des sichtbaren Bereichs befinden, hinter Interaktionen liegen (Modals, Tabs) oder selten verwendet werden. Vermeiden Sie Lazy Loading für wichtige UI-Elemente oberhalb des sichtbaren Bereichs — der zusätzliche Roundtrip kann die wahrgenommene Performance beeinträchtigen.

// Good candidate: modal only opened on click
const Modal = defineAsyncComponent(() => import('./Modal.vue'))

// Poor candidate: hero shown immediately on load
// import Hero directly instead

Schnelltest

Testen Sie Ihr Verständnis von defineAsyncComponent.

Zusammenfassung

Sie haben das Laden asynchroner Komponenten mit defineAsyncComponent kennengelernt:

  • Die Loader-Form gibt einen dynamischen import() für Code-Splitting zurück
  • Die Optionsform ergänzt loadingComponent, errorComponent, delay und timeout
  • delay verhindert ein kurzes Aufblitzen des Ladeindikators; timeout bricht zu langsame Ladevorgänge ab
  • onError(error, retry, fail, attempts) implementiert die Logik für erneute Versuche oder Abbruch
  • Innerhalb von Suspense übernimmt der Fallback der Boundary die Anzeige des Ladezustands

Häufig gestellte Fragen

Ist die Lektion „Asynchrone Komponenten mit defineAsyncComponent“ kostenlos?

Ja — der vollständige Text von „Asynchrone Komponenten mit defineAsyncComponent“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Asynchrone Komponenten mit defineAsyncComponent“?

defineAsyncComponent(), loadingComponent, errorComponent sowie Optionen für delay und timeout Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Asynchrone Komponenten mit defineAsyncComponent“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Vue-Suspense-Komponente
  2. Asynchrone Komponenten mit defineAsyncComponent
  3. Streaming-SSR mit renderToWebStream
  4. Strategien für verzögerte Hydration
← Zurück zu Vue Academy