如何使用prefetchPlugin＆amp ;;来优化webpack的构建时间分析工具？

Question

以前的研究：

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

  

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

     

来自构建统计信息的提示

     

有analyse tool可视化您的构建，提供   一些暗示如何优化构建大小和构建性能。

     

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

我生成了stats文件（available here） 将其上传到webpack的分析工具
并在 Hints 标签下 我告诉使用prefetchPlugin：

  

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

     

长模块构建链

     

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

     

我从里面挖掘网页，找到prefechPlugin上唯一可用的文档是这样的：

  

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

     

PrefetchPlugin

     

new webpack.PrefetchPlugin([context], request)

     

对普通模块的请求，该模块甚至在之前被解析和构建   要求它发生。这可以提高性能。 尝试分析   首先构建以确定聪明的预取点。   

我的问题：

• 如何正确使用prefetchPlugin？
• 在Analyze工具中使用它的正确工作流程是什么？
• 我如何知道prefetchPlugin是否有效？我该怎么测量呢？
• 从链中间预取模块意味着什么？

我真的很感激一些例子

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

Answer 1

是的，pre-fetch插件文档几乎不存在。在为自己搞清楚之后，它非常简单易用，而且它没有太大的灵活性。基本上，它需要两个参数，上下文（可选）和模块路径（相对于上下文）。您的案例中的上下文为/absolute/path/to/your/project/node_modules/react-transform-har/，假设您的屏幕截图中的代字号是根据网络包node_module resolution引用的node_modules。

理想情况下，实际的预取模块应该不超过三个模块依赖性。所以在你的情况下，isFunction.js是具有长构建链的模块，理想情况下它应该在getNative.js预取

但是，我怀疑你的配置中有一些时髦，因为你的构建链依赖关系是指模块依赖，它应该由webpack自动优化。我不确定你是怎么做到的，但在我们的例子中，我们没有看到有关node_modules中长构建链的任何警告。我们的大多数长链都是由于深度嵌套的反应组件需要scss。即：

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

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

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

Answer 2

你的链中间可能有react-transform-hmr/index.js因为它开始大约一半。您可以尝试PrefetchPlugin('react-transform-hmr/index')并重新运行您的个人资料，看看它是否有助于加快您构建的总时间。