先前的研究：

如webpack的Wiki所述，可以使用分析工具来优化构建性能：

来自：https : //github.com/webpack/docs/wiki/build-performance#hints-from-build-stats

建造统计信息提示

有一个分析工具可以可视化您的构建，并提供一些提示，说明如何优化构建大小和构建性能。

您可以通过运行webpack --profile --json-stats.json来生成所需的JSON文件

我生成了stats文件（可在此处获取），并将其上传到webpack的分析工具，
并在“ 提示”标签下告诉我要使用prefetchPlugin：

来自：http : //webpack.github.io/analyse/#hints

长模块构建链

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

我从内到外挖掘了网络，发现在prefechPlugin上可用的唯一文档是：

来自：https : //webpack.js.org/plugins/prefetch-plugin/

预取插件

new webpack.PrefetchPlugin([context], request)

对普通模块的请求，该请求甚至在需求发生之前就已解决并构建。这样可以提高性能。首先尝试对构建进行概要分析，以确定巧妙的预取点。

我的问题：

• 如何正确使用prefetchPlugin？
• 什么是将其与“分析”工具一起使用的正确工作流程？
• 我怎么知道prefetchPlugin是否有效？我该如何测量？
• 从链的中间预取模块意味着什么？

我会很感激一些例子

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

是的，预取插件文档几乎不存在。在为自己弄清楚它之后，它非常简单易用，并且没有太大的灵活性。基本上，它需要两个参数，上下文（可选）和模块路径（相对于上下文）。在您的情况下，上下文/absolute/path/to/your/project/node_modules/react-transform-har/假定屏幕截图中的波浪号是node_modules根据webpack的node_module resolution引用的。

理想的是，实际的预取模块深度应不超过三个模块依赖性。因此，在您的情况下isFunction.js，模块链较长，理想情况下应在以下位置预取getNative.js

但是，我怀疑您的配置中有些时髦，因为您的构建链依赖关系是指模块依赖关系，应由webpack自动对其进行优化。我不确定您是怎么得到的，但是在我们的案例中，我们看不到有关node_modules中长构建链的任何警告。我们大部分的长构建链是由于需要scss的深度嵌套的react组件所致。即：

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

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

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

您的链的中间可能react-transform-hmr/index.js大约从一半开始。您可以尝试PrefetchPlugin('react-transform-hmr/index')重新运行配置文件，以查看它是否有助于加快构建时间。