by addy 原创文章,欢迎转载,但希望全文转载,注明本文地址。

本文地址:http://www.iamaddy.net/2016/09/webpack-build-analyzing-statistics/

建立可视化分析统计可以帮助我们更好的理解webpack。我们可以很容易地从构建结果那里得到的统计数据,我们可以使用一个工具来可视化这些数据,可以分析我们程序包的组成。

配置webpack

为了得到合适的输出我们需要对配置文件做两个调整,我们需要加上这两个标志: – profile 捕捉性能时间的相关信息。 – json 使webpack中输出我们希望这些统计数据。

下面是在package中要加的代码:

{
  ...
  "scripts": {

    "stats": "webpack --profile --json > stats.json",

    ...
  },
  ...
}

也可以在命令行运行

webpack --profile --json > stats.json

这是基本的设置,不用改webpack中的配置。

可视化工具

方法的分析工具
Webpack Visualizer
Webpack Chart
robertknight/webpack-bundle-size-analyzer

当你优化包输出的大小,这些工具是非常重要的。官方工具有最多的功能,但即使是简单的可视化可以揭示问题点。

webpack统计插件

如果你想通过一个插件来管理的统计,看看 stats-webpack-plugin。它使您能够控制输出更多的数据,你可以用它来输出,例如排除某些依赖。

结论

分析你生成的数据输出非常有用,您可以使用相同的技术在旧的项目上,以了解其组成。

本文为原创文章,可能会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,谢谢合作

本文地址:http://www.iamaddy.net/2016/09/webpack-build-analyzing-statistics/

想要打赏?你的鼓励是我前进的动力! addy打赏二维码

关注个人公众号web_lab,不定期更新一些干货~ web_lab公众号