Code Splitting In React

Code-Splitting is a feature supported by JavaScript bundlers which can create multiple bundles that can be dynamically loaded at runtime. More info

Articles & Tutorials

Code splitting in React: An overview (blog.logrocket.com)

Mar 18, 2021

The more code a project has, the slower the browser will load. Therefore, you often have to balance the size of your dependencies with the performance you expect out of your JavaScript. Code splitting is a useful way to strike this balance.

Jessica S. Reuter Castrogiovanni

Code Splitting

Speed up your React app with dynamic imports and route-centric code splitting (blog.logrocket.com)

Oct 28, 2020

In this article, we’ll look at how to improve performance using route-centric code splitting.

Lawrence Oputa

Code splitting React components with TypeScript and NO Babel (blog.logrocket.com)

Mar 12, 2020

With the advent of the now-infamous single page application, extreme amounts of JavaScript started getting pushed to the browser. The sheer weight of JavaScript is one problem, but the browser also has to parse the downloaded JavaScript.

Paul Cowan

React-Imported-Component v6 (itnext.io)

Oct 08, 2019

React-imported-component v6 is the first code-splitting library with exposed hooks API, as well as the first Create-React-App compatible one, thanks to the babel macros support.

Anton Korzunov

Redux with Code-Splitting and Type Checking (blogs.dropbox.com)

Jul 16, 2019

This article assumes a working knowledge of Redux, React, React-Redux, TypeScript, and uses a little bit of Lodash for convenience.

Matthew Gerstman

React Code Splitting in 2019 (itnext.io)

Mar 19, 2019

It’s 2019! Everybody thinks they know code splitting. So — let’s double check!

Anton Korzunov

Code Splitting

Get Lazy With React (telerik.com)

Mar 11, 2019

As your React app grows, so does your bundle size. Splitting your bundle can help you lazy-load only the things the user absolutely needs. This can reduce the code needed for an initial load, delaying other loading of components or modules until the user asks for it.

Eric Bishard

Using React Loadable for Code Splitting by Components and Routes (css-tricks.com)

Mar 06, 2019

Code splitting is possible in a React application using React Loadable. It provides a higher-order component that can be set up to dynamically import specific components at specific times.

Kingsley Silas

Code Splitting

Code Splitting in React (flaviocopes.com)

Dec 22, 2018

What is Code Splitting and how to introduce it in a React app

Flavio Copes

Code Splitting

How to code split Redux store to further improve your app's performance (dev.to)

Aug 14, 2018

These days, to achieve optimal app load times when users visit our website, we are questioning every byte of code that is being transferred on the network.

Sagi Avinash Varma

Split your app into pieces! (react.christmas)

Dec 12, 2017

Kristofer Selbekk

Code Splitting

Quick guide to Webpack bundle and code splitting with React (blog.logrocket.com)

Nov 15, 2017

You’re probably here because your app has grown to the point where forcing the user to download the entire thing as a single file seems cruel and unusual.

Christian Nwamba

Introducing React Loadable (jamie.build)

Mar 12, 2017

React Loadable is a small library I wrote to make component-centric code splitting easier in React.

Jamie Kyle

Code Splitting

Video Guides & Talks

Code Splitting in React Native (youtube.com)

Oct 16, 2019

Karan Thakkar

Courses & Video Series

Intermediate React, v2 (frontendmasters.com)

Jun 11, 2019

Learn to build scalable React applications using the latest tools and techniques available in the React ecosystem! This is a modular course where you can pick and choose the various pieces of the react ecosystem you want to learn.