Was ist Code Splitting?

Code Splitting zerlegt ein monolithisches JavaScript-Bundle in kleinere Chunks, die bei Bedarf geladen werden statt im Voraus. Für composable-commerce-Storefronts ist es der direkteste Hebel, um First-Party-JS auf der Initial-Navigation zu reduzieren - mit Folgewirkung auf INP, Hydration-Kosten und Gesamt-Responsiveness.

Definition

Moderne Bundler wie Vite, Webpack, Turbopack, Rollup und esbuild erzeugen Chunks entlang Route-Grenzen, dynamischer Importe oder Komponenten-Boundaries. Frameworks wie Next.js, Nuxt, Remix und SvelteKit splitten automatisch pro Route und Layout, manuelle Splits über import() decken schwere Komponenten wie Videoplayer, 3D-Viewer oder Checkout-Schritte ab. Der Browser lädt zuerst den Entry-Chunk, dann zusätzliche Chunks beim Navigieren oder Mounten einzelner Komponenten. Wirksames Splitting erfordert Sorgfalt bei gemeinsamen Dependencies, damit weder Duplikate noch Waterfall-Loads im Critical Path entstehen.

Warum es zählt

Jedes Kilobyte JavaScript hat Kosten: Parsing, Kompilieren, Ausführen und in Framework-Apps Hydration. Große Monolith-Bundles regressieren INP und verzögern Time-to-Interactive auf Mittelklasse-Android-Geräten, die global den Commerce-Traffic dominieren. Code Splitting hält das Initial-Bundle auf das fokussiert, was die erste View tatsächlich braucht, und vertagt den Rest. Bei Storefronts mit Analytics, ab-testing, personalization, recommendation-engine-Widgets und Chat addieren sich die Einsparungen schnell. Splitting verbessert außerdem die Cache-Wiederverwendung über Deploys, weil unveränderte Chunks gecached bleiben.

Anwendungsfälle

Eine typische Headless-Storefront splittet pro Route, sodass PDP, PLP und Checkout eigene Chunks haben. Schwere Komponenten wie ein Konfigurator, ein Review-Widget oder ein Video-Modul werden per dynamischem Import nur bei Bedarf geladen. React Server Components verlagern viel Render-Arbeit auf den Server, sodass nur interaktive Islands im Client-Bundle bleiben - eine perfekte Ergänzung zu Code Splitting in Next.js. Astro mit islands-architecture geht weiter und liefert per Default null JS, hydratisiert nur explizit markierte Komponenten. Zusammen mit lazy-loading von Bildern und Drittskripten ist Code Splitting eine nicht verhandelbare Grundlage moderner Core-Web-Vitals-Arbeit.

Verwandt

Mehr dazu: Composable Headless Frontend · Performance and Core Web Vitals.