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.
So, we'll get one bundle for /login
, one for /user/:id
, and one for /
. Additionally, we’ll get another main
bundle with all the dependencies.
Whatever route the user visits first, they'll get the bundle for that route and the main bundle. In the background...