Code Splitting

Code splitting is the practice of breaking a JavaScript bundle into smaller chunks that load on demand instead of shipping the whole application in one large file.

Modern bundlers such as webpack, Vite, and Rollup let you split code at route boundaries or around components that are not needed immediately. Rather than forcing a visitor to download every line of script before the page becomes usable, the browser fetches a small initial chunk and pulls additional chunks only when a route is visited or an interaction triggers them. Dynamic import() statements and framework features like React's lazy loading are the usual mechanisms.

The technical payoff is a smaller, faster initial payload. Less JavaScript to parse and execute on the main thread shortens the path to an interactive page, which helps Interaction to Next Paint and, indirectly, Largest Contentful Paint when scripts compete with rendering. For sites that lean heavily on client-side frameworks, thoughtful splitting is one of the more reliable ways to cut Total Blocking Time.

From a search perspective the concern is that important content should not be hidden behind chunks that only load after user interaction. Google's Web Rendering Service executes JavaScript, but content that only appears after a click may not be seen during indexing. Pair code splitting with server-side rendering or static generation for anything that must be crawlable, and keep critical content in the initial HTML.

Related: JavaScript SEO and rendering guide, Critical CSS, DOM, INP guide