Progressive Web Apps with React

What is code splitting?

Code splitting is the act of splitting up our JavaScript file into meaningful chunks in order to improve performance, but why do we need it?

Well, when a user first accesses our application, we only need the JavaScript for the route they're currently on.

This means when they're on /login, we only need LoginContainer.js and its dependencies. We don't need UserContainer.js, so we want to immediately load LoginContainer.js and lazy-load UserContainer.js. However, our current Webpack setup creates a single bundle.js file. All our JavaScript is tied together and must be loaded together. Code splitting is a way to fix that. Instead of a single monolithic JavaScript file, we get multiple JavaScript files, one for each route. ...