Code Splitting In React

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

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

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.

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.

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

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.

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.

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

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.

Learn to build scalable React applications using the tools and techniques available in the React ecosystem

In this course, you will be learn how to get your react app to load as quickly as possible to maximize user engagement