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.
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...