如何使用prefetchPlugin＆分析工具来优化webpack的构build时间？
以前的研究：
正如webpack的wiki所说，可以使用分析工具来优化构build性能：
来自： https ： //github.com/webpack/docs/wiki/build-performance#hints-from-build-stats
来自构build统计的提示
有一个可视化你的构build的分析工具 ，也提供了一些提示如何优化构build大小和构build性能 。
您可以通过运行webpack –profile –json> stats.json来生成所需的JSON文件
我生成的统计文件（ 在这里可用 ）上传到webpack的分析工具
并在提示标签下，我告诉使用prefetchPlugin：
来自： http : //webpack.github.io/analyse/#hints
长模块构build链
使用预取增加构build性能。 从链的中间预取一个模块。
我在里面挖了一个网页，find在prefechPlugin上可用的唯一文档是这样的：
来自： https ： //webpack.github.io/docs/list-of-plugins.html#prefetchplugin
PrefetchPlugin
new webpack.PrefetchPlugin([context], request)对正常模块的请求，即使在需要之前也会parsing和构build。 这可以提高性能。 尝试首先分析构build，以确定聪明的预取点 。
我的问题：
- 如何正确使用prefetchPlugin？
- 分析工具中使用的正确工作stream程是什么？
- 我如何知道prefetchPlugin是否工作？ 我怎么测量它？
- 从链的中间预取模块意味着什么？
我会很欣赏一些例子
请帮助我使这个问题成为下一个想要使用prefechPlugin和Analyze工具的开发人员的宝贵资源。 谢谢。
是的，预取插件文档几乎不存在。 在为我自己弄清楚之后，它的使用非常简单，而且没有太大的灵活性。 基本上，它有两个参数，上下文（可选）和模块path（相对于上下文）。 在你的情况下，上下文将是/absolute/path/to/your/project/node_modules/react-transform-har/假设你的屏幕截图中的代字号是指node_modules webpack的node_module分辨率 。
实际的预取模块理想情况下应该不超过三个模块依赖关系。 所以在你的情况下， isFunction.js是具有长构build链的模块，理想情况下它应该在getNative.js预取
不过，我怀疑你的configuration中有些东西是因为你的构build链依赖关系是指模块依赖关系，它应该由webpack自动优化。 我不确定你是如何得到这个的，但在我们的例子中，我们没有看到关于node_modules中的长build链的警告。 我们大部分的长链构build都是由于深度嵌套的需要scss的反应组件。 即：
无论如何，您将需要为每个警告添加一个新的插件，如下所示：
plugins: [ new webpack.PrefetchPlugin('/web/', 'app/modules/HeaderNav.jsx'), new webpack.PrefetchPlugin('/web/', 'app/pages/FrontPage.jsx') ];
第二个参数必须是模块的相对位置的string。 希望这是有道理的。
你的链条的中间可能会有一些react-transform-hmr/index.js因为它从一半左右开始。 你可以尝试PrefetchPlugin('react-transform-hmr/index')并重新运行你的configuration文件，看看它是否有助于加快你的总体构build时间。
