如何使用prefetchPlugin和分析工具优化webpack的构建时间?

optimization Webpack

泡芙番长

2020-03-23

先前的研究:

正如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是否有效?我该如何测量?
  • 从链的中间预取模块意味着什么

I'll really appreciate some examples

Please help me make this question a valuable resource for the next developer who wants to use the prefechPlugin and the Analyse tools. Thank you.

第2684篇《如何使用prefetchPlugin和分析工具优化webpack的构建时间?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

0个回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android