build-statistics-webpack-plugin

$3

BuildStatisticsPlugin 是一个webpack插件，用于上报webpack各阶段的耗时信息。

#### 1. 用法

在webpack.config.js中配置，
``
const BuildStatisticsPlugin = require('build-statistics-webpack-plugin');
...
module.exports = {
...,
plugins: [
...,
new BuildStatisticsPlugin({
path: ..., // 一个文件的绝对地址
}),
],
};
`

#### 2. 文件内容

BuildStatisticsPlugin会自动向指定的path中写入统计数据。
webpack build，webpack watch，以及webpack-dev-server的场景中，都会写入文件，
值得注意的是，当监测到文件变更时，不写文件。

文件内容是一个JSON，
`
{
hash: ...,
stages: [
{
stage,
startTime,
endTime,
elpase
},
...,
]
}
`

（1）hash
hash为webpack自带的stats中的hash字段。

（2）stages
stages是一个数组，其中保存了webpack构建过程中，各阶段的耗时信息。

stage表示阶段名：

| stage | description | begin | end |
| --- | --- | --- | --- |
| start | 准备阶段 | compiler.hooks.compile | compiler.hooks.compilation |
| load | 载入文件 | compiler.hooks.compilation | compilation.hooks.finishModules |
| assets | 代码生成 | compilation.hooks.finishModules | compilation.hooks.additionalAssets |
| uglify | 压缩 | compilation.hooks.additionalAssets | compilation.hooks.afterOptimizeChunkAssets |
| emit | 写文件 | compilation.hooks.afterOptimizeChunkAssets | compiler.hooks.done |

startTime，endTime为该阶段的开始和结束时间，
elapse为该阶段耗时。

$3

插件内部使用了debug，用来记录trace日志和error日志，
命令行中传入以下前置参数，可以获取完整日志。例如，
`
$ DEBUG=build-statistics-webpack-plugin* webpack
`

结果如下，
`
build-statistics-webpack-plugin:trace 开始compile +0ms
build-statistics-webpack-plugin:trace 创建一个新的compilation +10ms
build-statistics-webpack-plugin:trace 开始载入文件 +0ms
build-statistics-webpack-plugin:trace 载入文件结束 +523ms
build-statistics-webpack-plugin:trace 生成目标文件名和文件内容 +38ms
build-statistics-webpack-plugin:trace 对文件内容进行压缩 +11ms
build-statistics-webpack-plugin:trace 完成 +4ms
build-statistics-webpack-plugin:trace 各事件发生的时刻：[{"event":"compiler.compile","timestamp":1542187628407},{"event":"compiler.compilation","timestamp":1542187628414},{"event":"compilation.finishModules","timestamp":1542187628937},{"event":"compilation.additionalAssets","timestamp":1542187628975},{"event":"compilation.afterOptimizeChunkAssets","timestamp":1542187628986},{"event":"compiler.done","timestamp":1542187628990}] +1ms
build-statistics-webpack-plugin:trace 各阶段耗时：[{"stage":"start","startTime":1542187628407,"endTime":1542187628414,"elapse":7},{"stage":"load","startTime":1542187628414,"endTime":1542187628937,"elapse":523},{"stage":"assets","startTime":1542187628937,"endTime":1542187628975,"elapse":38},{"stage":"uglify","startTime":1542187628975,"endTime":1542187628986,"elapse":11},{"stage":"emit","startTime":1542187628986,"endTime":1542187628990,"elapse":4}] +0ms
build-statistics-webpack-plugin:trace hash：16555666ef09ced98421 +12ms
build-statistics-webpack-plugin:trace 准备写文件 +0ms
build-statistics-webpack-plugin:trace 写入文件：*/1542187627983.json
``