包含统计数据的文件

通过 webpack 编译源文件时，用户可以生成包含有关于模块的统计数据的 JSON 文件。这些统计数据不仅可以帮助开发者来分析应用的依赖图表，还可以优化编译的速度。这个 JSON 文件可以通过以下的命令来生成:

  1. webpack --profile --json > compilation-stats.json

这个标识是告诉 webpack compilation-stats.json 要包含依赖的图表以及各种其他的编译信息。一般来说，也会把 --profile 一起加入，这样每一个包含自身编译数据的模块对象(modules object) 都会添加 profile 。

结构 (Structure)

最外层的输出 JSON 文件比较容易理解，但是其中还是有一小部分嵌套的数据不是那么容易理解。不过放心，这其中的每一部分都在后面有更详细的解释，并且注释中还附带有超链接可以直接跳入相应的章节。

  1. {
  2.   "version": "1.4.13", // 用来编译的 webpack 的版本
  3.   "hash": "11593e3b3ac85436984a", // 编译使用的 hash
  4.   "time": 2469, // 编译耗时 (ms)
  5.   "filteredModules": 0, // 当 `exclude`传入`toJson` 函数时，统计被无视的模块的数量
  6.   "outputPath": "/", // path to webpack 输出目录的 path 路径
  7.   "assetsByChunkName": {
  8.     // 用作映射的 chunk 的名称
  9.     "main": "web.js?h=11593e3b3ac85436984a",
  10.     "named-chunk": "named-chunk.web.js",
  11.     "other-chunk": [
  12.       "other-chunk.js",
  13.       "other-chunk.css"
  14.     ]
  15.   },
  16.   "assets": [
  17.     // asset 对象 (asset objects) 的数组
  18.   ],
  19.   "chunks": [
  20.     // chunk 对象 (chunk objects) 的数组
  21.   ],
  22.   "modules": [
  23.     // 模块对象 (module objects) 的数组
  24.   ],
  25.   "errors": [
  26.     // 错误字符串 (error string) 的数组
  27.   ],
  28.   "warnings": [
  29.     // 警告字符串 (warning string) 的数组
  30.   ]
  31. }

Asset对象 (Asset Objects)

每一个 assets 对象都表示一个编译出的 output 文件。 assets 都会有一个共同的结构：

  1. {
  2.   "chunkNames": [], // 这个 asset 包含的 chunk
  3.   "chunks": [ 10, 6 ], // 这个 asset 包含的 chunk 的 id
  4.   "emitted": true, // 表示这个 asset 是否会让它输出到 output 目录
  5.   "name": "10.web.js", // 输出的文件名
  6.   "size": 1058 // 文件的大小
  7. }

Chunk 对象 (Chunk Objects)

每一个 chunks 表示一组称为 chunk 的模块。每一个对象都满足以下的结构。

  1. {
  2.   "entry": true, // 表示这个 chunk 是否包含 webpack 的运行时
  3.   "files": [
  4.     // 一个包含这个 chunk 的文件名的数组
  5.   ],
  6.   "filteredModules": 0, // 见上文的 结构
  7.   "id": 0, // 这个 chunk 的id
  8.   "initial": true, // 表示这个 chunk 是开始就要加载还是 懒加载(lazy-loading)
  9.   "modules": [
  10.     // 模块对象 (module objects)的数组
  11.     "web.js?h=11593e3b3ac85436984a"
  12.   ],
  13.   "names": [
  14.     // 包含在这个 chunk 内的 chunk 的名字的数组
  15.   ],
  16.   "origins": [
  17.     // 下文详述
  18.   ],
  19.   "parents": [], // 父 chunk 的 ids
  20.   "rendered": true, // 表示这个 chunk 是否会参与进编译
  21.   "size": 188057 // chunk 的大小(byte)
  22. }

chunks 对象还会包含一个 来源 (origins) ，来表示每一个 chunk 是从哪里来的。 来源 (origins) 是以下的形式

  1. {
  2.   "loc": "", // 具体是哪行生成了这个chunk
  3.   "module": "(webpack)\\test\\browsertest\\lib\\index.web.js", // 模块的位置
  4.   "moduleId": 0, // 模块的ID
  5.   "moduleIdentifier": "(webpack)\\test\\browsertest\\lib\\index.web.js", // 模块的地址
  6.   "moduleName": "./lib/index.web.js", // 模块的相对地址
  7.   "name": "main", // chunk的名称
  8.   "reasons": [
  9.     // 模块对象中`reason`的数组
  10.   ]
  11. }

模块对象 (Module Objects)

缺少了对实际参与进编译的模块的描述，这些数据又有什么意义呢。每一个在依赖图表中的模块都可以表示成以下的形式。

  1. {
  2.   "assets": [
  3.     // asset对象 (asset objects)的数组
  4.   ],
  5.   "built": true, // 表示这个模块会参与 Loaders , 解析, 并被编译
  6.   "cacheable": true, // 表示这个模块是否会被缓存
  7.   "chunks": [
  8.     // 包含这个模块的 chunks 的 id
  9.   ],
  10.   "errors": 0, // 处理这个模块发现的错误的数量
  11.   "failed": false, // 编译是否失败
  12.   "id": 0, // 这个模块的ID (类似于 `module.id`)
  13.   "identifier": "(webpack)\\test\\browsertest\\lib\\index.web.js", // webpack内部使用的唯一的标识
  14.   "name": "./lib/index.web.js", // 实际文件的地址
  15.   "optional": false, // 每一个对这个模块的请求都会包裹在 `try... catch` 内 (与ESM无关)
  16.   "prefetched": false, // 表示这个模块是否会被 prefetched
  17.   "profile": {
  18.     // 有关 `--profile` flag 的这个模块特有的编译数据 (ms)
  19.     "building": 73, // 载入和解析
  20.     "dependencies": 242, // 编译依赖
  21.     "factory": 11 // 解决依赖
  22.   },
  23.   "reasons": [
  24.     // 见下文描述
  25.   ],
  26.   "size": 3593, // 预估模块的大小 (byte)
  27.   "source": "// Should not break it...\r\nif(typeof...", // 字符串化的输入
  28.   "warnings": 0 // 处理模块时警告的数量
  29. }

每一个模块都包含一个 理由 (reasons) 对象，这个对象描述了这个模块被加入依赖图表的理由。每一个 理由 (reasons) 都类似于上文 chunk objects中的 来源 (origins):

  1. {
  2.   "loc": "33:24-93", // 导致这个被加入依赖图标的代码行数
  3.   "module": "./lib/index.web.js", // 所基于模块的相对地址 context
  4.   "moduleId": 0, // 模块的 ID
  5.   "moduleIdentifier": "(webpack)\\test\\browsertest\\lib\\index.web.js", // 模块的地址
  6.   "moduleName": "./lib/index.web.js", // 可读性更好的模块名称 (用于 "更好的打印 (pretty-printing)")
  7.   "type": "require.context", // 使用的请求的种类 (type of request)
  8.   "userRequest": "../../cases" // 用来 `import` 或者 `require` 的源字符串
  9. }

错误与警告

错误 (errors) 和 警告 (warnings) 会包含一个字符串数组。每个字符串包含了信息和栈的追溯:

  1. ../cases/parsing/browserify/index.js
  2. Critical dependencies:
  3. 2:114-121 This seem to be a pre-built javascript file. Even while this is possible, it's not recommended. Try to require to original source to get better results.
  4.  @ ../cases/parsing/browserify/index.js 2:114-121

需要注意的是，当 错误详情为false(errorDetails:false)传入toJson函数时，对栈的追溯就不会被显示。错误详情(errorDetils) 默认值为 true

贡献人员

byzyk byzyk franjohn21 franjohn21 skipjack skipjack