code splitting
/kode SPLIT-ing/ · noun · Development · Origin: 2015
Definitions
A technique that breaks an application's JavaScript bundle into smaller chunks that are loaded on demand rather than all upfront. Code splitting ensures users only download the code needed for the page they're viewing. React.lazy(), dynamic import(), and route-based splitting are common approaches. The alternative — shipping a single massive bundle — is a guaranteed performance problem.
In plain English: Breaking up a website's code into smaller pieces that are only downloaded when needed, so the initial page loads faster.
Example: Code splitting the admin dashboard into its own chunk saved 400KB from the initial bundle that 99% of users never need.
Etymology
- 2012
- As single-page applications grew, JavaScript bundle sizes became a performance bottleneck. RequireJS and other AMD loaders supported manual module loading.
- 2014
- Webpack introduced the concept of 'code splitting' as a first-class feature, allowing developers to split bundles at explicit split points or dynamically via require.ensure.
- 2015
- Webpack 2 added support for ES2015 dynamic import() syntax, making code splitting more intuitive. The technique became a standard recommendation for web performance.
- 2017-Present
- React.lazy, Vue async components, and similar framework features made code splitting accessible without manual webpack configuration. Bundlers like Vite adopted it by default.
Origin Story
Splitting the Monolith to Speed Up the Web
Code splitting is a technique for breaking a large JavaScript bundle into smaller chunks that can be loaded on demand, reducing the initial download size and speeding up page loads. The practice gained mainstream adoption around 2015 with the rise of webpack, the module bundler that made dynamic imports and chunk-based loading accessible to everyday developers. Before code splitting, single-page applications often shipped megabytes of JavaScript in one file, forcing users to download and parse everything before seeing any content. Webpack's code splitting feature let developers define split points where the bundler would automatically carve the application into separate files, loaded only when needed. React formalized the pattern further with React.lazy and Suspense in 2018, making component-level code splitting a first-class citizen. The technique draws on older ideas like AMD (Asynchronous Module Definition) and lazy loading, but webpack's integration made it practical at scale. Today, code splitting is considered a fundamental web performance optimization, and tools like Vite, Rollup, and esbuild all support it natively. Google's Core Web Vitals metrics have made code splitting even more important, as initial bundle size directly impacts Largest Contentful Paint scores.
Coined by: Webpack community (Tobias Koppers)
Context: Popularized around 2015 by webpack's dynamic import support, building on earlier lazy-loading concepts.
Fun fact: In 2017, a study by Google found that the median mobile web page shipped over 400 KB of JavaScript. Code splitting adoption helped reduce initial payloads by 30-60% for applications that adopted it aggressively.