Code splitting

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.

More reading

A complete guide to Webpack

This complete guide explains everything about Webpack, what it is, how it works, how to setup it for both development and production

Big-O Notation Cheat Sheet

Big-O notation gives you a rough indication of the running time of an algorithm and the amount of memory it uses

Tailwind CSS

A low-level utility-first CSS framework to write inline styles for rapidly building custom user interfaces

Cracking The Frontend Interview, Part 4: JavaScript

JavaScript is the heart of web development, be prepared to be asked multiple confusing advanced concepts about it during frontend interview