Modern JavaScript Web Development Cookbook

There's more…

The components created by Loadable() include a .preload() method that you can use to start the importing process before the components are actually needed. We can quickly test it. For example, let's set things up so that if the user moves the mouse over the Alpha link, the component will be preloaded:

<Link to="/alpha">    <span onMouseOver={() => AsyncAlpha.preload()}>Alpha...</span></Link>

We can quickly verify that this works. When you load the updated version of the code, if you hover over the Alpha link, you'll see that a chunk of code gets downloaded—though nothing changes onscreen, as the following screenshot shows:

 Preloading ...