Code splitting in JavaScript

Nov 20, 2020 • ☕️ 1 min read

Code splitting is a technique used by module bundlers to split your code into various smaller bundles which can be loaded on demand or in parallel.

The main purpose is to minimize the amount of scripts that needs to be loaded, parsed, compiled, and executed to result in faster page load times.

Code splitting can be achieved at different levels — component, route, library — by using proposal syntax dynamic imports, 3rd-party libraries, bundler plugins, or framework features.

Popular bundlers have built-in support for splitting your bundles using dynamic imports syntax with almost zero configuration. (Read more at Webpack, with Babel, Parcel, etc.)

React supports code splitting out of the box with React.lazy at component level, but no server-side rendering (SSR) and library splitting.

Loadable-components is a library for loading components with dynamic imports, similar to React.lazy but has support for SSR and library splitting.

Related Posts

What is ABI stability and why does Swift support it?

ABI stability enables OS vendors to embed a Swift Standard Library and runtime in the OS that is compatible with applications built with Swift 5 or later

The need of CSS style guides

On following a CSS style guide to write sane, manageable and scalable code

On adoption of monorepo

Monorepo is not new, Google and Facebook have been using it for years. So why now? I believe it depends a lot on the maturity of building systems

Normalize CSS

A small CSS file normalize.css that provides better cross-browser consistency in the default styling of HTML elements alternative to the traditional CSS reset