build-statistics-webpack-plugin

build-statistics-webpack-plugin

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