Published in


<link rel=”prefetch/preload”> in webpack

webpack 4.6.0 adds support for prefetching (and preloading).

What‘s <link rel=”prefetch”>?

This “Resource Hint” tells the browser that this is a resource that is probably needed for some navigation in the future.

What’s <link rel=”preload”>?

This “Resource Hint” tells the browser that this is a resource that is definitely needed for this navigation, but will be discovered later. Chrome even prints a warning when the resource isn’t used 3 seconds after load.

Why is this useful?

Preload is used to discover resources earlier and avoid a waterfall-like fetching. It’s can bring down the page load to 2 round-trips (1. HTML, 2. all other resources). Using it doesn’t cost additional bandwidth.

Code Splitting

We assume you are building your huge application with webpack and use On-Demand-Loading via import() to load only the parts of your application the user currently needs.

Using prefetching in webpack

The new prefetch feature allows to improve this workflow. And it’s super easy.

Using preloading in webpack

Similar to import(/* webpackPrefetch: true */ "...") it’s possible to use
import(/* webpackPreload: true */ "..."). This has a bunch of differences compared to prefetch:

  • A preloaded chunk has medium priority and instantly downloaded. A prefetched chunk is downloaded in browser idle time.
  • A preloaded chunk should be instantly requested by the parent chunk. A prefetched chunk can be used anytime in the future.
  • Browser support is different.

Multiple prefetched chunks

You can add the webpackPrefetch flag to as many import() as you like to, but note that all prefetched chunks fight for the bandwidth. They are actually queued up and the really used chunk might not be prefetch when the user requests it.


What if multiple import()s request the same chunk and some of the are prefetched/preloaded?
Preload wins over prefetch, which wins over nothing. In the same category the highest order wins.

/* webpackChunkName: "test", webpackPrefetch: true */
// or
/* webpackChunkName: "test" */
/* webpackPrefetch: true */
// spacing optional
  • ag-Grid (DataGrid) donated a total of $35,000
  • Segment (Data Infrastructure) donated a total of $24,000
  • Adobe (Software) donated a total of $12,000
  • Capital One (Bank) donated a total of $12,000
  • Full list



The official Medium publication for the webpack open source project!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store