How to optimize webpack build time with prefetchPlugin & analysis?

Question

Previous study:

As the webpack wiki says, you can use an analysis tool to optimize build performance:

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

Statistics Building Tips

There is an analysis tool that visualizes your assembly and also provides some tips on how to optimize assembly size and assembly performance .

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

I create a statistics file ( which can be found here ) loaded it into the webpack analysis tool and the "Tips" tab I said to use prefetchPlugin:

from: http://webpack.imtqy.com/analyse/#hints

Long module assembly chains

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

I dug the network inside out to find the only documentation available on prefechPlugin is:

from: https://webpack.imtqy.com/docs/list-of-plugins.html#prefetchplugin

Prefetchplugin

new webpack.PrefetchPlugin([context], request)

A request for a normal module, which is allowed and built before a, requires this. This can improve performance. To try a profile, first create it to identify smart prefetch points .

---

My questions:

• How to use prefetchPlugin correctly?
• What is the right workflow to use with the analysis tool?
• How to find out if prefetchPlugin is working? how can i measure it?
• What does prefetch a module from the middle of the chain mean?

I will really appreciate some examples.

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

Answer 1

Yes, the documentation for the preview plugin is virtually non-existent. Having figured this out for himself, it is quite easy to use, and there is not much flexibility. Basically, it takes two arguments, the context (optional) and the path to the module (relative to the context). The context in your case would be /absolute/path/to/your/project/node_modules/react-transform-har/ , assuming that the tilde in the screenshot refers to node_modules according to the resolution of the webpack node_module .

The actual prefetch module should ideally have no more than three module dependencies. So in your case isFunction.js is a module with a long assembly chain, and ideally it should be pre-selected in getNative.js

However, I suspect that there is something scary in your config, because your link chain dependencies are related to module dependencies, which should be automatically optimized using webpack. I'm not sure how you got this, but in our case we do not see any warnings about long assembly chains in node_modules. Most of our long assembly chains relate to deeply nested reaction components that require scss. i.e:

Regardless, you want to add a new plugin for each of the alerts, for example:

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

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

Answer 2

The middle of your chain is probably react-transform-hmr/index.js , as it starts about halfway. You can try PrefetchPlugin('react-transform-hmr/index') and re-run your profile to see if it helps speed up your overall build time.