Progressive Web Apps with React

AsyncComponent

The goal of this section is to create a higher-order component that helps us with code splitting.

This component will only load its dependencies when it is rendered, or when we explicitly tell it to. This means that if we pass it LoginContainer.js, it will only load that file when the user navigates to /login, or if we tell it to load it.

In other words, this component will give us complete control over when our JavaScript files are loaded and opens up the world of lazy loading. However, it also means that whenever a route is rendered, the relevant files will be automatically loaded.

If that sounds abstract, let's see it in action.

Create a new file in your components/ directory called AsyncComponent.js and add the basic skeleton, ...