# build-statistics-webpack-plugin

> build statistics

Latest version **1.0.3** (published 2018-11-14) · ISC license · 0 weekly downloads

## Install

```sh
npm install build-statistics-webpack-plugin
pnpm add build-statistics-webpack-plugin
yarn add build-statistics-webpack-plugin
bun add build-statistics-webpack-plugin
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2018-11-14 |
| First published | 2018-11-14 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 29.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | thzt |
| Maintainers | thzt |
| Keywords | webpack, build, statistics |

## Links

- npm: https://www.npmjs.com/package/build-statistics-webpack-plugin
- npm.io page: https://npm.io/package/build-statistics-webpack-plugin

## Dependencies (1)

- [debug](https://npm.io/package/debug.md) ^4.1.0

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 1.0.3 (latest) — 2018-11-14
- 1.0.2 — 2018-11-14
- 1.0.1 — 2018-11-14
- 1.0.0 — 2018-11-14

## README

### 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](https://webpack.js.org/configuration/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](https://github.com/visionmedia/debug)，用来记录`trace`日志和`error`日志，  
命令行中传入以下[前置参数](https://www.gnu.org/software/bash/manual/bashref.html#Environment)，可以获取完整日志。例如，  
```
$ 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
```

---
_Source: https://npm.io/package/build-statistics-webpack-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._