Frontend Academy · Lektion

Code Splitting und Lazy Routes

Verwenden Sie dynamic import(), um das Bundle an Routengrenzen aufzuteilen, laden Sie React- und Vue-Komponenten verzögert und überwachen Sie die Chunk-Größen in der Build-Ausgabe.

Code Splitting und Lazy Routes ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 4 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 Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum Code-Splitting?

Ein monolithisches JavaScript-Bundle zwingt jeden Besucher, jede Codezeile Ihrer Anwendung herunterzuladen – selbst für Funktionen, die er nie verwendet. Code-Splitting teilt das Bundle in Chunks auf, die bei Bedarf geladen werden.

Dynamischer import()

import('./module') gibt ein Promise zurück, das in das Modul aufgelöst wird. Bundler (Vite, webpack) erkennen dies und erzeugen einen separaten Chunk, der zur Laufzeit geladen wird.

// Without split — entire heavy lib in main bundle:
import { generateChart } from 'heavy-chart-lib';

// With split — loaded only when needed:
button.addEventListener('click', async () => {
  const { generateChart } = await import('heavy-chart-lib');
  generateChart(data);
});

React.lazy() – Splitting auf Komponentenebene

React.lazy(() => import('./Heavy')) erzeugt eine Komponente, deren Code erst beim ersten Rendern geladen wird. Verpacken Sie sie in <Suspense>, um während des Ladens einen Fallback anzuzeigen.

import { lazy, Suspense } from 'react';

const Dashboard = lazy(() => import('./Dashboard'));

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <Dashboard />
    </Suspense>
  );
}

Routenbasiertes Splitting in React Router

Jede Route erhält ihren eigenen Chunk – Nutzer laden nur den Code für die Seiten herunter, die sie tatsächlich besuchen.

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { lazy, Suspense } from 'react';

const Home    = lazy(() => import('./pages/Home'));
const Profile = lazy(() => import('./pages/Profile'));
const Admin   = lazy(() => import('./pages/Admin'));

const router = createBrowserRouter([
  { path: '/',        element: <Suspense fallback={<Spinner/>}><Home /></Suspense> },
  { path: '/profile', element: <Suspense fallback={<Spinner/>}><Profile /></Suspense> },
  { path: '/admin',   element: <Suspense fallback={<Spinner/>}><Admin /></Suspense> }
]);

Asynchrone Komponenten in Vue 3

Vue bietet für dasselbe Muster defineAsyncComponent.

import { defineAsyncComponent } from 'vue';

const Dashboard = defineAsyncComponent(() =>
  import('./Dashboard.vue')
);

// Use in template like a normal component

Lazy Routes im Vue Router

Vue Router unterstützt dynamische Imports in Routendefinitionen – für jede Route werden eigene Chunks erzeugt.

const routes = [
  { path: '/',        component: () => import('./pages/Home.vue') },
  { path: '/profile', component: () => import('./pages/Profile.vue') },
  { path: '/admin',   component: () => import('./pages/Admin.vue') }
];

Webpack Magic Comments

Über sogenannte „Magic Comments“ innerhalb der Import-Anweisung können Sie Chunk-Namen und das Prefetch-Verhalten festlegen.

const Profile = lazy(() =>
  import(/* webpackChunkName: "profile", webpackPrefetch: true */ './Profile')
);

// Vite supports a subset; @vite-ignore for special cases

Prefetch vs. Preload

prefetch: Lädt einen Chunk während Leerlaufzeiten herunter, wenn wahrscheinlich als Nächstes navigiert wird. preload: Lädt einen Chunk sofort mit hoher Priorität herunter, wenn er für die aktuelle Route kritisch ist. Verwenden Sie prefetch beim Überfahren eines Links mit dem Mauszeiger und preload für absehbar unmittelbar benötigte Ressourcen.

Bundle Analyzer

Verwenden Sie rollup-plugin-visualizer (Vite) oder webpack-bundle-analyzer, um die Größe von Chunks zu visualisieren. Achten Sie auf übergroße Chunks, doppelte Abhängigkeiten und Bibliotheken, für die Sie Tree-Shaking vergessen haben.

// vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer';

export default {
  plugins: [visualizer({ open: true, gzipSize: true })]
};

Splitting von Vendor-Chunks

Teilen Sie Bibliotheken von Drittanbietern in einen separaten Vendor-Chunk auf, der sich seltener ändert als Ihr Anwendungscode. So können Browser ihn über mehrere Deployments hinweg im Cache behalten.

// vite.config.ts
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          react: ['react', 'react-dom'],
          ui: ['@radix-ui/react-dialog', '@radix-ui/react-tooltip']
        }
      }
    }
  }
};

Wann Sie NICHT splitten sollten

Sehr kleine Chunks (unter 20 KB) schaden mehr, als sie nutzen: Der HTTP-Overhead übersteigt die Einsparung durch das kleinere Bundle. Teilen Sie nicht jede Komponente auf, sondern an Routengrenzen und um tatsächlich umfangreiche Funktionen herum.

Schnelltest

Womit muss Reacts Wrapper lazy() kombiniert werden, damit er korrekt rendert?

Zusammenfassung: Code-Splitting

Dynamische Imports erzeugen separate Chunks. Verwenden Sie React.lazy und Suspense für das Splitting auf Komponentenebene. Nutzen Sie Lazy-Route-Komponenten in React Router und Vue Router. Verwenden Sie prefetch für wahrscheinlich als Nächstes benötigte Chunks und preload für kritische Chunks. Ein Bundle Analyzer macht unnötigen Code sichtbar. Teilen Sie Vendor-Bibliotheken für eine bessere Cache-Nutzung auf. Vermeiden Sie Micro-Chunks unter 20 KB.

Häufig gestellte Fragen

Ist die Lektion „Code Splitting und Lazy Routes“ kostenlos?

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

Was lerne ich in „Code Splitting und Lazy Routes“?

Verwenden Sie dynamic import(), um das Bundle an Routengrenzen aufzuteilen, laden Sie React- und Vue-Komponenten verzögert und überwachen Sie die Chunk-Größen in der Build-Ausgabe. Du übst Frontend 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 Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend 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 4 von 4.

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

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 Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend 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

Core Web Vitals: LCP, FID, CLS
Lighthouse-Audits und Bewertung
Bildoptimierung: Lazy Loading und WebP-Formate
Code Splitting und Lazy Routes

← Zurück zu Frontend Academy