build-statistics-webpack-plugin

1.0.3 • Public • Published

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 buildwebpack 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

startTimeendTime为该阶段的开始和结束时间,
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

Package Sidebar

Install

npm i build-statistics-webpack-plugin

Weekly Downloads

179

Version

1.0.3

License

ISC

Unpacked Size

30.3 kB

Total Files

12

Last publish

Collaborators

  • thzt