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
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
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 in React (flaviocopes.com)
Dec 22, 2018
What is Code Splitting and how to introduce it in a React app
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
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.
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

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.
Intermediate React (frontendmasters.com)
Sep 14, 2018
Learn to build scalable React applications using the tools and techniques available in the React ecosystem
Build a Server Rendered + Code Split App in React with React Universal Component (egghead.io)
Dec 14, 2017
In this course, you will be learn how to get your react app to load as quickly as possible to maximize user engagement
  • Tim Kindberg