What is Code Splitting?

Code Splitting breaks a monolithic JavaScript bundle into smaller chunks that are loaded on demand instead of upfront. For composable-commerce storefronts it is the most direct way to reduce first-party-JS shipped on initial navigation, which in turn improves INP, hydration cost and overall responsiveness.

Definition

Modern bundlers like Vite, Webpack, Turbopack, Rollup and esbuild generate separate chunks based on route boundaries, dynamic imports or component-level boundaries. Frameworks such as Next.js, Nuxt, Remix and SvelteKit automatically split per route and per layout, while developers add manual splits with import() for heavy components like a video player, a 3D viewer or a checkout step. The browser loads the entry chunk first, then fetches additional chunks as the user navigates or specific components mount. Effective splitting requires careful attention to shared dependencies to avoid duplicate code or waterfall loads in the critical path.

Why it matters

Every kilobyte of JavaScript has a cost: parsing, compiling, executing and, in framework apps, hydration. Large monolithic bundles regress INP and delay time-to-interactive on mid-range Android devices that still dominate global commerce traffic. Code Splitting keeps the initial bundle focused on what the first view actually needs, deferring the rest. For storefronts that integrate analytics, ab-testing, personalization, recommendation-engine widgets and chat, the savings compound quickly. Splitting also improves cache reuse across deploys, since unchanged chunks remain cached.

Use cases

A typical headless storefront splits per route so PDPs, PLPs and checkout each get their own chunks. Heavy components like a configurator, a review widget or a video module are loaded via dynamic imports only when needed. React Server Components push much of the rendering work to the server, leaving only interactive islands in the client bundle, which complements Code Splitting in Next.js. In Astro, the islands-architecture takes the idea further by sending zero JS by default and hydrating only what is marked interactive. Combined with lazy-loading of images and third-party scripts, Code Splitting is a non-negotiable foundation for modern Core Web Vitals work.

Related

Explore Composable Headless Frontend · Performance and Core Web Vitals.