It might be tempting to make most of your React components lazy components that live in their own bundle. After all, there isn't much extra work that needs to happen in order to set up separate bundles and to make lazy components. There are some downsides to this though. If you have too many lazy components, your app is going to end up making several HTTP requests to fetch them – at the same time. There's no benefit to having separate bundles for components that are used on the same part of the app. You're better off trying to bundle components together in a way that one HTTP request is made to load what is needed on the current page.
A helpful way to think of this is to associate "pages" with bundles. If you have lazy page components, then everything on that page will also be lazy, yet bundled together with other components on the page. Let's build an example that demonstrates how to organize our lazy components. Let...