PrefetchPlugin

Prefetch normal module requests, causing them to be resolved and built before the first import or require of that module occurs. Using this plugin can boost performance. Try to profile the build first to determine clever prefetching points.

import webpack from "webpack";

new webpack.PrefetchPlugin([context], request);

Options

• context: An absolute path to a directory
• request: A request string for a normal module

What it does

webpack discovers modules by walking the dependency graph: a module deep in an import chain is only resolved once everything above it has been parsed. A long chain therefore builds partly in sequence, even though webpack processes modules in parallel wherever it can.

This plugin starts one such chain at the very beginning of the compilation instead, when webpack would otherwise be waiting for the first modules to be parsed. By the time the real import is found, the module is already built and the result is reused.

import path from "node:path";
import webpack from "webpack";

export default {
  plugins: [
    // start building the heaviest dependency right away
    new webpack.PrefetchPlugin(path.resolve("./src"), "./deeply/nested/heavy"),
  ],
};

Prefetching a module that the build never imports only wastes the work: the module ends up in no chunk and nothing is emitted for it. That makes profiling the build first worthwhile — see Build performance — because the win depends entirely on picking a request that is both expensive and discovered late.