webpack build可视化统计分析
by addy 原创文章,欢迎转载,但希望全文转载,注明本文地址。
本文地址:https://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。它使您能够控制输出更多的数据,你可以用它来输出,例如排除某些依赖。
结论
分析你生成的数据输出非常有用,您可以使用相同的技术在旧的项目上,以了解其组成。
本文为原创文章,可能会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,谢谢合作
本文地址:https://www.iamaddy.net/2016/09/webpack-build-analyzing-statistics/
个人知乎,欢迎关注:https://www.zhihu.com/people/iamaddy
欢迎关注公众号【入门游戏开发】
近期评论