Vue Academy · Lektion

Lazy Loading und Code-Splitting

Teilen Sie Bundles auf und laden Sie Komponenten und Routen verzögert.

Lazy Loading und Code-Splitting ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 3. 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 3 Lektionen.

Warum die Bundle-Größe wichtig ist

Wenn alles in einer großen JavaScript-Datei ausgeliefert wird, müssen Benutzer länger warten, bis der erste Bildschirm erscheint. Code-Splitting teilt Ihre App in kleinere Chunks auf, die nur bei Bedarf geladen werden. Dadurch wird der anfängliche Download kleiner und der Start schneller.

Dynamisches import()

Das wichtigste Werkzeug ist die dynamische Funktion import(). Anders als ein statischer Import am Anfang einer Datei lädt sie ein Modul bei Bedarf und gibt ein Promise zurück. Bundler teilen jeden dynamischen Import in einen eigenen Chunk auf.

const module = await import("./heavyModule.js")
module.doSomething()

Code-Splitting auf Route-Ebene

Den größten Vorteil erzielen Sie durch die Aufteilung nach Routen, sodass jede Seite ihren eigenen Code lädt. Übergeben Sie im Vue Router eine Funktion, die einen dynamischen Import zurückgibt, anstatt die Komponente direkt zu importieren.

const routes = [
  {
    path: "/dashboard",
    component: () => import("./views/Dashboard.vue")
  }
]

Statische und verzögert geladene Routen

Vergleichen Sie die beiden Varianten. Beim statischen Import wird die Komponente in den Haupt-Chunk gebündelt. Die verzögert geladene Variante erstellt einen separaten Chunk, der erst abgerufen wird, wenn die Route aufgerufen wird.

// eager (always loaded)
import Dashboard from "./views/Dashboard.vue"

// lazy (loaded on demand)
const Dashboard = () => import("./views/Dashboard.vue")

defineAsyncComponent

Um eine Komponente außerhalb des Routers verzögert zu laden, umschließen Sie einen dynamischen Import mit defineAsyncComponent. Vue lädt die Komponente erst, wenn sie zum ersten Mal gerendert wird.

import { defineAsyncComponent } from "vue"

const Chart = defineAsyncComponent(() =>
  import("./components/HeavyChart.vue")
)

Asynchrone Komponenten registrieren

Registrieren Sie eine asynchrone Komponente wie jede andere und verwenden Sie sie in Ihrem Template. Vue übernimmt den Ladevorgang transparent.

export default {
  components: {
    HeavyChart: defineAsyncComponent(() =>
      import("./components/HeavyChart.vue")
    )
  }
}

Lade- und Fehlerzustände

Die erweiterte Form von defineAsyncComponent akzeptiert Optionen, um während des Ladens einen Platzhalter und bei einem Fehler eine Fallback-Komponente anzuzeigen.

const Chart = defineAsyncComponent({
  loader: () => import("./HeavyChart.vue"),
  loadingComponent: Spinner,
  errorComponent: LoadError,
  delay: 200,
  timeout: 5000
})

Schwere Komponenten verzögert laden

Geeignete Kandidaten für das verzögerte Laden sind große oder selten verwendete Bestandteile: Diagramme, Rich-Text-Editoren, Karten oder modale Dialoge, die nur von einigen Benutzern geöffnet werden.

const RichEditor = defineAsyncComponent(() =>
  import("./components/RichTextEditor.vue")
)
// only downloaded when the editor is actually shown

Bedingtes Laden mit v-if

Kombinieren Sie eine asynchrone Komponente mit v-if, damit ihr Chunk erst abgerufen wird, wenn der Benutzer sie auslöst.

<template>
  <button @click="showEditor = true">Edit</button>
  <RichEditor v-if="showEditor" />
</template>

Benannte Chunks zum Debuggen

Magic Comments im Webpack-Stil geben Chunks lesbare Namen, wodurch sich der Netzwerk-Tab und die Build-Ausgabe leichter untersuchen lassen.

const Reports = () => import(
  /* webpackChunkName: "reports" */ "./views/Reports.vue"
)

Auswirkungen messen

Prüfen Sie nach dem Aufteilen die Build-Ausgabe oder den Netzwerk-Tab des Browsers. Sie sollten mehrere kleinere Chunk-Dateien statt eines großen Bundles sehen, und beim initialen Laden sollte weniger Code heruntergeladen werden.

Kurztest

Testen Sie Ihr Wissen über Lazy Loading.

Zusammenfassung

Code-Splitting mit dynamischem import() reduziert das initiale Bundle. Verwenden Sie für Lazy-Routen eine Funktion, die einen Import zurückgibt, und für bedarfsgesteuerte Komponenten defineAsyncComponent, optional mit Lade- und Fehlerzuständen. Laden Sie umfangreiche oder selten verwendete Teile verzögert, damit der Start schnell bleibt. Als Nächstes lernen Sie, mit Memoization unnötige Arbeit zwischenzuspeichern und zu überspringen.

Häufig gestellte Fragen

Ist die Lektion „Lazy Loading und Code-Splitting“ kostenlos?

Ja — der vollständige Text von „Lazy Loading und Code-Splitting“ 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 3 Lektionen.

Was lerne ich in „Lazy Loading und Code-Splitting“?

Teilen Sie Bundles auf und laden Sie Komponenten und Routen verzögert. 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 1 von 3.

Wie lange dauert die Lektion „Lazy Loading und Code-Splitting“?

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

← Zurück zu Vue Academy