Code Splitting by Routes and Components in React
When your app’s bundle starts to grow it will slow things down. That’s why we see a lot more use of code-splitting in modern web development. Code-splitting is the process of taking one large bundle containing your entire app and splitting them up into multiple smaller bundles that contain separate parts of your app. This technique allows you to load chunks of code only when needed.
For example, when a visitor enters your application on the homepage, there is no need to load in all the code related to a completely separate page. That user might not even go to that route at all, so we only want to load it when the user navigates to that page. If we can load only the code necessary for the home page this means our initial loading time will be a lot faster, especially on slow networks.
In this post, we will take a look at how we can boost the performance of our React applications by implementing code-splitting using React Loadable. If you rather save time and start with a boilerplate that includes code-splitting, try out React Milkshake.
Route-based splitting
A great way to get started is to implement route-based code-splitting, which means we load code chucks according to the current route.
