Progressive Web Apps with React

Lazy-load

Here's where the meat of this chapter will take place.

We want to load the resources needed for our initial route first, to get that initial rendering done as fast as possible. This means resources needed for other routes will not be loaded.

In practical terms, this means that we want to load LoginContainer first (if the user is not logged in) and defer loading UserContainer.

However, once that initial route is rendered and the user can see the login screen, we want to prepare for the future. If they then click over to the UserContainer, we want to display it as fast as possible. This means loading UserContainer resources in the background, once loading the initial route is done.

This process is called lazy-loading--loading resources ...