96

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.

jmunsch
  • 22,771
  • 11
  • 93
  • 114
Asaf Katz
  • 4,608
  • 4
  • 37
  • 42
  • 1
    How are we supposed to use the stats analyzer tool? When I click upload, nothing happens, and there's no submit button. Only "use example" – TetraDev Jun 07 '16 at 15:15
  • Console output says `Uncaught SyntaxError: Unexpected token r in JSON at position 0` when uploading any stats.json – TetraDev Jun 07 '16 at 15:22
  • 1
    @TetraDev this means that you have an error in your JSON file. Try opening it with a text editor and see if there is something that does not look like valid JSON. (I have the same problem with debug output from Webpack on the first line). – maufl Jun 13 '16 at 12:42
  • The docs have `> stats.json` but that writes an extra few line at the top which break the parser – Alex Riina Mar 15 '17 at 17:25

2 Answers2

36

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:

enter image description here

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.

Community
  • 1
  • 1
4m1r
  • 12,234
  • 9
  • 46
  • 58
  • I'm trying to get some of my builds down and even after the explanation I'm still really confused on how to use this tool. Can you expand on what exactly 'context' means and what each of the parameters in the prefetch needs to be? I'm unsure as to what exactly is being done in the plugin – ThrowsException Jun 28 '16 at 20:54
  • Haven't used this in a while, but its probably still the same. There should only be two arguments to the plugin. One, context, which is the context of module so for example `app/components/module.jsx` would be `'app'` and I think the second should be relative location, i.e. `'components/module.jsx'` – 4m1r Jun 28 '16 at 21:18
  • 1
    Ok ill have another pass at it. I've tried at least two dozen PrefetchPlugin arrangements and nothing seems to remove it from my long build chain. I'm having the same problem the poster was having where I have a node module that is actually in my long build chain and I'm trying to prefetch it. I don't know if maybe webpack doesn't know how to handle this situation. – ThrowsException Jun 28 '16 at 21:38
  • I used the prefetch plugin to greatly increase the performance of my project that uses handlebars.js. Here's the syntax that worked for me: `new webpack.PrefetchPlugin(__dirname + "/node_modules", "handlebars/runtime.js"),` – a_dreb Jul 12 '16 at 20:52
  • Also, if the thing you're wanting to prefetch is not a package (i.e. not in `node_modules`), you can just pass the _request_ string. Note that the first argument, _context_, is optional. – natchiketa Jan 03 '17 at 16:51
  • Great. Very useful if nobody ever states how the plugin is called in NPM. Thanks. – Coded Monkey Sep 05 '17 at 08:50
2

The middle of your chain there is probably react-transform-hmr/index.js as it starts about half way through. You could try PrefetchPlugin('react-transform-hmr/index') and rerun your profile to see if it helps speed up your total time to build.

Aaron Jensen
  • 6,030
  • 1
  • 30
  • 40
  • only worse.. from 2351ms to 2361ms, it alse throws an error `Entry module not found: Error: Cannot resolve module 'react-transform-hmr/index' in /Users/asafkatz/Development/my-react-builerplate` – Asaf Katz Oct 13 '15 at 20:54
  • 4
    well, a 10ms difference isn't worse, the difference is statistically insignificant. I'd play around w/ different things, `react-transform-hmr` or `react-transform-hmr/index.js` etc. – Aaron Jensen Oct 14 '15 at 04:09