Webpack.js.org: Plugins - Document the PrefetchPlugin

[pksjce]

_From @halt-hammerzeit on October 29, 2015 12:30_

It says:

A request for a normal module, which is resolved and built even before a require to it occurs. This can boost performance.

I don't see how it can boost performance.
Why is a nested require() much slower than the same root level require()?

_Copied from original issue: webpack/webpack#1566_

[pksjce]

_From @aackerman on October 29, 2015 12:35_

The plugin is for prefetching assets over the wire before the require is executed. For example prefetching code to render a different view in a single-page app. So while a user is looking at the current page the code for another page that is not in the original page payload is downloaded before the user attempts to navigate to that page.

[pksjce]

_From @halt-hammerzeit on October 29, 2015 13:0_

@aackerman oh, that makes sense. But how does it boost Webpack build performance? (as per Analyse Tool hints)

Long module build chains

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

[pksjce]

_From @aackerman on October 29, 2015 13:8_

That part is pretty unclear to me, check this out. http://stackoverflow.com/questions/32923085/how-to-optimize-webpacks-build-time-using-prefetchplugin-analyse-tool

[pksjce]

_From @halt-hammerzeit on October 29, 2015 13:10_

@aackerman
ha ha, actually, I've already linked this discussion from that stackoverflow question:
http://stackoverflow.com/a/33415019/970769

I thought that maybe @sokra would answer if he wrote that thing

[pksjce]

_From @eladmoshe on February 1, 2016 12:45_

+1

[pksjce]

_From @loopmode on May 12, 2016 0:12_

+1

[pksjce]

_From @pizza2code on June 30, 2016 13:48_

+1

[pksjce]

_From @octatone on July 1, 2016 19:18_

+1

[pksjce]

_From @DontRelaX on July 5, 2016 9:26_

+1

[pksjce]

_From @elektronik2k5 on July 6, 2016 7:15_

+1

[pksjce]

_From @pigcan on August 3, 2016 8:51_

+1

[pksjce]

_From @TheLarkInn on August 18, 2016 17:6_

@sokra heh I think we need more than a few lines to explain how this one works on our docs.

[pksjce]

_From @epikhighs on September 3, 2016 0:24_

uhm... so does this really do anything? does it help w/ recompile times?

[pksjce]

_From @jakwuh on September 3, 2016 17:16_

@sokra please, write a small note on this

[pksjce]

_From @Kovensky on September 5, 2016 5:2_

I tried reading through the code, but all I can find is it setting some flags in the internal module object (prefetch or prefetched), but nothing that actually _reads_ those flags 😕

The only guess I can make for what it's supposed to do, from the documentation, is that if the specified module would've been split into a separate chunk (via e.g. require.ensure), that the webpack bootstrap will attempt to fetch that chunk as soon as possible, instead of having to wait until the require.ensure call is hit to start the fetch.

[pksjce]

_From @jakwuh on September 5, 2016 8:8_

@Kovensky from what I see that's not totally correct.

Actually, PrefetchPlugin does nothing with bundles and chunks. It only prefetches module during compilation (as well as in watch mode) but does not include them into any chunks. I guess this is for the sake of performance. AutomaticPrefetchPlugin is a great example of usage prefetching.

[pksjce]

_From @Kovensky on September 5, 2016 8:22_

I am not sure what kind of gain would that sort of prefetching do, unless you're compiling in a distributed filesystem or some other case where I/O is the bottleneck in the compilation...

[pksjce]

_From @jakwuh on September 5, 2016 8:33_

@Kovensky sure, that's the question for @sokra

[pksjce]

_From @andreypopp on September 5, 2016 9:58_

I think prefetching would shine if we are able to achieve CPU saturation: what about trying this with happypack?

[pksjce]

_From @sokra on September 5, 2016 10:50_

Actually, PrefetchPlugin does nothing with bundles and chunks. It only prefetches module during compilation (as well as in watch mode) but does not include them into any chunks. I guess this is for the sake of performance.

[pksjce]

_From @Kovensky on September 5, 2016 11:2_

@sokra but how does what it does help performance?

[pksjce]

_From @sokra on September 5, 2016 11:51_

long chains of requires can form a chain where webpack will know about the last module very late. This could slow down the compilation because webpack has to wait for I/O (esp. resolving). The PrefetchPlugin starts modules earlier so I/O is less an concern.

[pksjce]

_From @Kovensky on September 5, 2016 12:47_

I also realized that, for my speculated use case of prefetching chunks, you can just do that without needing any plugins by doing a require.resolve call that does nothing with the resolved modules.

PS: I never actually used require.resolve 😕

[pksjce]

_From @sokra on September 5, 2016 13:29_

require.resolve include the module in the chunk.

[graingert]

https://github.com/webpack/webpack/blob/master/lib/AutomaticPrefetchPlugin.js doesn't seem to be documented at all

[PaquitoSoft]

Is there already any documentation for AutomaticPrefetchPlugin?

[skipjack]

@PaquitoSoft not seeing anything on that plugin yet (here or via google)... do you have a link or were you just curious?

@webpack/documentation-team anyone familiar with this one want to take a stab at it? I'd be happy to review grammar etc...

[PaquitoSoft]

@skipjack just curious. I've seen that plugin exported in webpack object and wanted to know what it's about.

[vijayst]

For me, the prefetch plugin does not seem to work. I have about 2000 modules. I pre-fetched about 40 modules. And the maximum length of the call chain in analyse tool (hints) is only 4. But there was no reduction in webpack build time. It is still around 140 seconds.

[skipjack]

Found the old docs for this:

https://github.com/webpack/docs/wiki/list-of-plugins#prefetchplugin

Submitting a PR for this and #1378 momentarily. I reworded the old docs a bit to fix some grammar but if anyone has ideas on how to elaborate please comment on the PR. All in all this plugin actually seems to be pretty straightforward (though maybe I'm missing something).

[codedmonkey]

Maybe it would be helpful to actually point to where these plugins can be found? Very useful to know about a plugin that is unfindable.

[TheLarkInn]

Perfect is now used by default in webpack. So I'm not sure how relevant it is to use in ones config AFAIK

[fuchao2012]

@TheLarkInn I can also find this "hints" on Webpack Analyse tools which is said:

Long module build chains

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

[Herz3h]

@TheLarkInn you mean the PrefetchPlugin ? If so it should be specified somewhere in docs that it is used by default. I was about to start trying it in my config.