如何使用 prefetchPlugin & 优化 webpack 的构建时间分析工具? [英] How to optimize webpack's build time using prefetchPlugin & analyse tool?

问题描述

之前的研究:

正如 webpack 的 wiki 所说，可以使用分析工具来优化构建性能:

<块引用>

来自:

我翻遍了整个网络，找到了 prefechPlugin 上唯一可用的文档:

<块引用>

来自:

无论如何，您需要为每个警告添加一个新插件，如下所示:

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

第二个参数必须是模块相对位置的字符串.希望这是有道理的.

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.

解决方案

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.

这篇关于如何使用 prefetchPlugin &amp; 优化 webpack 的构建时间分析工具?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！