Zum Abschluss von Phase 4: Wie Sie dafür sorgen, dass der Browser nicht den Code JEDER einzelnen Seite herunterladen muss, bevor die App überhaupt startet – nur den Code der Seite, die der Nutzer gerade tatsächlich sieht.

Das Problem: ein immer größer werdendes Bundle

Ohne besondere Maßnahmen packt Vite den GESAMTEN JavaScript-Code unserer App – ProductListPage, ProductDetailPage, ReviewsPage, LoginPage, AccountPage und alles, was sie importieren – in EINE einzige Datei (das "Bundle"), die der Browser beim allerersten Seitenaufruf komplett herunterladen muss. Bei einer kleinen App wie unserer ist das kein Problem, bei echten, großen Anwendungen mit Dutzenden Seiten kann das Bundle mehrere Megabyte groß und die erste Ladezeit spürbar langsam werden.

Die Lösung: React.lazy() + Suspense

React.lazy() verwandelt einen normalen Import in einen VERZÖGERTEN Import – der Code der jeweiligen Seite wird erst heruntergeladen, wenn sie tatsächlich gebraucht wird ("Code Splitting"). Da das Herunterladen Zeit braucht, muss React währenddessen etwas anzeigen können – dafür ist <Suspense> da.

App.jsx aktualisieren: seltener genutzte Seiten lazy laden

Wir laden gezielt die Seiten faul, die nicht jeder Besucher braucht (Login, Konto, Bewertungen) – die Startseite ProductListPage und die Produktdetailseite bleiben normal importiert, da sie die meistgenutzten Seiten sind:

import { lazy, Suspense } from 'react';
import { Routes, Route } from 'react-router-dom';
import { useAuth } from './context/AuthContext';
import { useDocumentTitle } from './hooks/useDocumentTitle';
import ProductListPage from './pages/ProductListPage';
import ProductDetailPage from './pages/ProductDetailPage';
import ProtectedRoute from './components/ProtectedRoute';

const ReviewsPage = lazy(() => import('./pages/ReviewsPage'));
const LoginPage = lazy(() => import('./pages/LoginPage'));
const AccountPage = lazy(() => import('./pages/AccountPage'));

function App() {
  const { user, login, logout } = useAuth();
  useDocumentTitle('Produktkatalog');

  return (
    <div className="app">
      <header className="app-header">
        <h1>Produktkatalog</h1>
        {user ? (
          <p>Angemeldet als {user.username} <button onClick={logout}>Abmelden</button></p>
        ) : (
          <button onClick={() => login('Max Mustermann')}>Anmelden</button>
        )}
      </header>

      <Suspense fallback={<p>Lade Seite...</p>}>
        <Routes>
          <Route path="/" element={<ProductListPage />} />
          <Route path="/products/:sku" element={<ProductDetailPage />}>
            <Route path="reviews" element={<ReviewsPage />} />
          </Route>
          <Route path="/login" element={<LoginPage />} />
          <Route
            path="/account"
            element={
              <ProtectedRoute>
                <AccountPage />
              </ProtectedRoute>
            }
          />
        </Routes>
      </Suspense>
    </div>
  );
}

export default App;

Zwei Änderungen im Zusammenspiel: const ReviewsPage = lazy(() => import('./pages/ReviewsPage')) statt eines normalen import ReviewsPage from './pages/ReviewsPage' ganz oben in der Datei, UND <Suspense fallback={{...}}> rund um <Routes>, das anzeigt, was während des Ladens sichtbar sein soll.

Öffnen Sie in den Browser-Entwicklertools den "Network"-Tab, laden Sie die Startseite und navigieren Sie dann zu /login: Sie sehen eine NEUE, separate JavaScript-Datei nachgeladen werden, genau in diesem Moment – vorher war ihr Code schlicht nicht Teil des heruntergeladenen Bundles. Damit ist Phase 4 (Routing) abgeschlossen.