an der richtigen Stelle einsetzen
Code Splitting ist keine einmalige Maßnahme, sondern eine kontinuierliche Strategie. React.lazy und dynamische Imports laden JavaScript nur dann, wenn es wirklich gebraucht wird – aber nur, wenn die Split-Grenzen an den richtigen Stellen gezogen werden. Zu viele kleine Chunks verlangsamen das Laden durch HTTP-Overhead. Zu wenige verhindern jeglichen Nutzen. Dieses Tutorial zeigt, wie man die Balance findet.
Inhaltsverzeichnis
- 1. Warum Code Splitting und wo es wirkt
- 2. Bundle-Analyse: erst messen, dann splitten
- 3. React.lazy: Komponenten on demand laden
- 4. Suspense-Grenzen strategisch platzieren
- 5. Routen-basiertes Splitting: die wichtigste Split-Grenze
- 6. Komponenten-Splitting: wann es sich lohnt
- 7. Preloading: Chunks vor