Webpack 5 can output a resource hint when using inline directives and declaring imports. It will give the browser the following commands:

• preload (may be needed during the current navigation)
• prefetch (may be needed for future navigation)

The terms "current" and "future" may be confusing, but they essentially refer to the fact that prefetch loads content before the user needs it, which, in a way, loads and queues content ahead of time. This is a simple definition—a full explanation will follow—but in general, you can see the advantages and disadvantages in terms of memory usage and efficiency of user experience.

This simple prefetch example can have a HomePage component that renders a LoginButton component, which, upon being clicked, loads a LoginModal component.

The LoginButton file will need to be created; follow these instructions in LoginButton.js to do this:

import(/* webpackPrefetch: true */ 'LoginModal');

The preceding code will result in the following code snippet being appended to the header of the page:

 <linkrel="prefetch" href="login-modal-chunk.js">  

This will instruct the browser, when idle, to prefetch the login-modal-chunk.js file.

The preload directive has many differences when compared to prefetch:

• Chunks using the preload directive load in parallel to their parent chunk, whereas a prefetched chunk starts after the parent chunk finishes loading.
• Chunks must be instantly requested by the parent chunk when preloaded, whereas a prefetched chunk can be used at any time. 
• Chunks using the preload directive are instantly downloaded when called. A prefetched chunk is downloaded while the browser is idle.
• Simple preload directives can have components that always depend on libraries that should be in a separate chunk.

The choice of whether to use preload or prefetch depends largely on context; you will discover more on how that might apply to you as the tutorial progresses.

You should use prefetch or preload, depending on how the preceding points best suit your development needs. This largely depends on the complexity of the project and, ultimately, is a judgment call made by the developers.

The following example suggests an imagined component, ChartComponent, in ChartComponent.js, which requires a library that we will call ChartingLibrary. It instantly imports the library on demand and displays LoadingIndicator when rendered:

import(/* webpackPreload: true */ 'ChartingLibrary');

When ChartComponent is requested, charting-library-chunk is also requested through <link rel="preload">.  

Assuming page-chunk finishes loading faster, the page will be displayed with LoadingIndicator until charting-library-chunk finishes loading. This will give a loading time improvement since it only needs one round process instead of two. This is especially true in high-latency environments (where delays often occur in data processing networks).

Using webpackPreload incorrectly can harm the performance, so be mindful when using it.

You should now understand the purposes of prefetch and preload and how their usage affects performance if done incorrectly. A decision on their use will depend largely on how you wish your application to perform. The best approach is to make your decision on their use after conducting a formal bundle analysis, which we will discuss in the next section.