optimization - 如何使用 prefetch 插件来分析工具来优化 webpack 构建时间？

Question

之前的研究:

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

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

我生成统计文件 ( available here )将其上传到 webpack 的分析工具
和 Hints 选项卡下我告诉使用 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.

我翻遍了整个网络，发现 prefechPlugin 上唯一可用的文档是:

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.

<小时/>

我的问题:

• 如何正确使用prefetchPlugin？
• 将其与分析工具结合使用的正确工作流程是什么？
• 我如何知道 prefetchPlugin 是否有效？我怎样才能测量它？
• 从链中间预取模块意味着什么？

我真的很感激一些例子

请帮助我使这个问题成为下一个想要使用 prefechPlugin 和分析工具的开发人员的宝贵资源。谢谢。

Answer 1

是的，预取插件文档几乎不存在。自己摸索了一下，使用起来非常简单，而且没有太大的灵 active 。基本上，它需要两个参数，上下文(可选)和模块路径(相对于上下文)。您的情况下的上下文将是 /absolute/path/to/your/project/node_modules/react-transform-har/ 假设屏幕截图中的波形符指的是 node_modules 根据 webpack 的 node_module resolution .

理想情况下，实际的预取模块深度不应超过三个模块依赖关系。因此，在您的情况下， isFunction.js 是具有长构建链的模块，理想情况下应该在 getNative.js 处预获取它

但是，我怀疑你的配置中有一些奇怪的东西，因为你的构建链依赖项指的是模块依赖项，它应该由 webpack 自动优化。我不确定你是如何得到这个的，但在我们的例子中，我们没有看到任何关于 node_modules 中长构建链的警告。我们大部分的长构建链都是由于深度嵌套的 React 组件需要 scss。即:

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

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

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