webpack build可视化统计分析

建立可视化分析统计可以帮助我们更好的理解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.zhihu.com/people/iamaddy

欢迎关注公众号【入门游戏开发】