Was ist Code Splitting?

Modern web applications can have millions of lines of JavaScript. Without code splitting, all of this code gets bundled into a single file that every user must download before the application becomes interactive — even if they only visit one page.

Code splitting divides the application bundle into smaller chunks based on routes, components, or features. When a user visits the homepage, they only download the homepage code. When they navigate to the settings page, that code loads on demand. Libraries used only in specific features are split into their own chunks.

There are several approaches to code splitting. Route-based splitting loads code for each page separately (the most common approach). Component-based splitting loads heavy components on demand (like a rich text editor that's only needed when editing). Library splitting separates third-party dependencies into their own cacheable chunks.

Frameworks like Next.js implement route-based code splitting automatically. For component-level splitting, React's lazy() and Suspense enable developers to load components on demand. Webpack, Vite, and other bundlers handle the actual chunk creation and loading logic.