optimization - How to optimize webpack's build time using prefetchPlugin & analyse tool?

Question

Previous research:

As webpack's wiki says, it is possible to use the analyse tool to optimize build performance:

from: https://github.com/webpack/docs/wiki/build-performance#hints-from-build-stats

Hints from build stats

There is an analyse tool which visualise your build and also provides some hint how build size and build performance can be optimized.

You can generate the required JSON file by running webpack --profile --json > stats.json

I generate the stats file (available here) uploaded it to webpack's analize tool
and under Hints tab I told to use the prefetchPlugin:

from: http://webpack.github.io/analyse/#hints

Long module build chains

Use prefetching to increase build performance. Prefetch a module from the middle of the chain.

I digged the web inside out to find the only documentation available on prefechPlugin is this:

from: https://webpack.js.org/plugins/prefetch-plugin/

PrefetchPlugin

new webpack.PrefetchPlugin([context], request)

A request for a normal module, which is resolved and built even before a require to it occurs. This can boost performance. Try to profile the build first to determine clever prefetching points.

---

My questions:

• How to properly use prefetchPlugin?
• What is the right workflow to use it with the Analyse tool?
• How do I know if the prefetchPlugin works? how can I measure it?
• What it means to Prefetch a module from the middle of the chain?

I'll really appreciate some examples

Please help me make this question a valuable resource for the next developer who wants to use the prefechPlugin and the Analyse tools. Thank you.

Answer 1

Yeah, The pre-fetch plugin documentation is pretty much non-existent. After figuring it out for myself, its pretty simple to use, and there's not much flexibility to it. Basically, it takes two arguments, the context (optional) and the module path (relative to context). The context in your case would be /absolute/path/to/your/project/node_modules/react-transform-har/ assuming that the tilde in your screenshot is referring to node_modules as per webpack's node_module resolution.

The actual prefetch module should be ideally no more than three module dependencies deep. So in your case isFunction.js is the module with the long build chain and ideally it should be pre-fetched at getNative.js

However, I suspect there's something funky in your config, because your build chain dependencies are referring to module dependencies, which should be automatically optimized by webpack. I'm not sure how you got that, but in our case, we don't see any warnings about long build chains in node_modules. Most of our long build chains are due to deeply nested react components which require scss. ie:

Regardless, you'll want to add a new plugin for each of the warnings, like so:

plugins: [
    new webpack.PrefetchPlugin('/web/', 'app/modules/HeaderNav.jsx'),
    new webpack.PrefetchPlugin('/web/', 'app/pages/FrontPage.jsx')
];

The second argument must be a string to the relative location of the module. Hope this makes sense.