如何使用 prefetchPlugin & Analysis 工具优化 webpack 的构建时间？

以前的研究:

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

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

来自构建统计的提示

有一个分析工具分析工具，可视化你的建设，也 提供一些提示如何优化构建大小和构建性能
您可以通过运行 webpack —— profile 来生成所需的 JSON 文件 —— json > stats.json

我生成了统计文件(可在此下载) 上传到 webpack 的分析工具 < br > 和提示选项卡下我告诉使用 prefetchPlugin:

发信人: http://webpack.github.io/analyse/#hints

长模块建造链

使用预取 来提高构建性能。从 在链条的中间预取模块。

我把网页翻了个底朝天，发现 prefechPlugin 上唯一可用的文档是这样的:

发信人: https://webpack.js.org/plugins/prefetch-plugin/

PrefetchPlugin 插件

new webpack.PrefetchPlugin([context], request)

对普通模块的请求，甚至在此之前就已经解析和构建了该模块这样可以提高性能。 < strong > 尝试分析构建首先确定巧妙的预取点 。

我的问题是:

如何正确使用 prefetchPlugin？
在分析工具中使用它的正确工作流程是什么？
如何知道 prefetchPlugin 是否工作? 如何度量它？
这对 从链的中间预取一个模块意味着什么？

我真的很喜欢一些例子

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

17226

小开

最佳答案

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.