统计数据 | Stats Data

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

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

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

结构

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

{
  "version": "1.4.13", // Version of webpack used for the compilation
  "hash": "11593e3b3ac85436984a", // Compilation specific hash
  "time": 2469, // Compilation time in milliseconds
  "filteredModules": 0, // A count of excluded modules when `exclude` is passed to the `toJson` method
  "assetsByChunkName": {
    // Chunk name to emitted asset(s) mapping
    "main": "web.js?h=11593e3b3ac85436984a",
    "named-chunk": "named-chunk.web.js",
    "other-chunk": [
      "other-chunk.js",
      "other-chunk.css"
    ]
  },
  "assets": [
    // A list of asset objects
  ],
  "chunks": [
    // A list of chunk objects
  ],
  "modules": [
    // A list of module objects
  ],
  "errors": [
    // A list of error strings
  ],
  "warnings": [
    // A list of warning strings
  ]
}

Asset对象

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

{
  “chunkNames”：[]，//这个资产包含的块
  “chunks”：[10，6]，//该资产包含的块ID
  “emit”：true，//表示资产是否将其输出到`output`目录
  “name”：“10.web.js”，//输出文件名
  “size”：1058 //文件的大小（以字节为单位）
}

Chunk 对象

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

{
  “entry”：true，//指示块是否包含webpack运行时
  “文件”：[
    //包含此块的文件名字符串数组
  ],
  “filteredModules”：0，//请参阅上面顶层结构中的说明
  “id”：0，//这个块的ID
  “initial”：true，//指示此块在初始页面加载或按需加载时是否加载
  “模块”：[
    //模块对象的列表
    “web.jsΔH= 11593e3b3ac85436984a”
  ],
  “名称”：[
    //这个块中包含的块名称列表
  ],
  “起源”：[
    //请参阅下面的说明...
  ],
  “父母”：[]，//父块ID
  “rendered”：true，//指示块是否经历了代码生成
  “size”：188057 //块大小（以字节为单位）
}

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

{
  "loc": "", // Lines of code that generated this chunk
  "module": "(webpack)\\test\\browsertest\\lib\\index.web.js", // Path to the module
  "moduleId": 0, // The ID of the module
  "moduleIdentifier": "(webpack)\\test\\browsertest\\lib\\index.web.js", // Path to the module
  "moduleName": "./lib/index.web.js", // Relative path to the module
  "name": "main", // The name of the chunk
  "reasons": [
    // A list of the same `reasons` found in module objects
  ]
}

模块对象

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

{
  "assets": [
    // A list of asset objects
  ],
  "built": true, // Indicates that the module went through Loaders, Parsing, and Code Generation
  "cacheable": true, // Whether or not this module is cacheable
  "chunks": [
    // IDs of chunks that contain this module
  ],
  "errors": 0, // Number of errors when resolving or processing the module
  "failed": false, // Whether or not compilation failed on this module
  "id": 0, // The ID of the module (analagous to `module.id`)
  "identifier": "(webpack)\\test\\browsertest\\lib\\index.web.js", // A unique ID used internally
  "name": "./lib/index.web.js", // Path to the actual file
  "optional": false, // All requests to this module are with `try... catch` blocks (irrelevant with ESM)
  "prefetched": false, // Indicates whether or not the module was prefetched
  "profile": {
    // Module specific compilation stats corresponding to the `--profile` flag (in milliseconds)
    "building": 73, // Loading and parsing
    "dependencies": 242, // Building dependencies
    "factory": 11 // Resolving dependencies
  },
  "reasons": [
    // See the description below...
  ],
  "size": 3593, // Estimated size of the module in bytes
  "source": "// Should not break it...\r\nif(typeof...", // The stringified raw source
  "warnings": 0 // Number of warnings when resolving or processing the module
}

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

{
  "loc": "33:24-93", // Lines of code that caused the module to be included
  "module": "./lib/index.web.js", // Relative path to the module based on context
  "moduleId": 0, // The ID of the module
  "moduleIdentifier": "(webpack)\\test\\browsertest\\lib\\index.web.js", // Path to the module
  "moduleName": "./lib/index.web.js", // A more readable name for the module (used for "pretty-printing")
  "type": "require.context", // The type of request used
  "userRequest": "../../cases" // Raw string used for the `import` or `require` request
}

错误和警告

在errors和warnings特性都包含字符串列表。每个字符串都包含消息和堆栈跟踪：

../cases/parsing/browserify/index.js
Critical dependencies:
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 orginal source to get better results.
 @ ../cases/parsing/browserify/index.js 2:114-121

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

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2018-08-17