Stats 数据

webpackjsorg-mainAPI 参考

Stats 数据

使用 webpack 编译源码时，用户可以生成一个包含模块统计信息的 JSON 文件。这些统计信息可用于分析应用程序的依赖图，以及优化编译速度。该文件通常通过以下 CLI 命令生成：

bash 复制代码

npx webpack --profile --json=compilation-stats.json

--json=compilation-stats.json 标志告诉 webpack 输出一个包含依赖图和各种其他构建信息的 compilation-stats.json 文件。通常，还会添加 --profile 标志，以便在每个 modules 对象中增加一个 profile 部分，其中包含特定于模块的编译统计信息。

结构

输出 JSON 文件的顶层结构相当直观，但其中也有一些嵌套的数据结构。每个嵌套结构在下面都有专门的章节，以便更容易理解本文档。请注意，您可以点击下面顶层结构中的链接，跳转到相关章节和文档：

json 复制代码

{
  "version": "5.9.0", // 用于编译的 webpack 版本
  "hash": "11593e3b3ac85436984a", // 编译特定的哈希值
  "time": 2469, // 编译时间，单位毫秒
  "publicPath": "auto",
  "outputPath": "/", // webpack 输出目录的路径
  "assetsByChunkName": {
    // Chunk 名称到输出资源（asset）的映射
    "main": ["web.js?h=11593e3b3ac85436984a"],
    "named-chunk": ["named-chunk.web.js"],
    "other-chunk": ["other-chunk.js", "other-chunk.css"]
  },
  "assets": [
    // 资源对象列表
  ],
  "chunks": [
    // Chunk 对象列表
  ],
  "modules": [
    // 模块对象列表
  ],
  "entryPoints": {
    // 入口对象列表
  },
  "errors": [
    // 错误对象列表
  ],
  "errorsCount": 0, // 错误数量
  "warnings": [
    // 警告对象列表
  ],
  "warningsCount": 0 // 警告数量
}

资源对象（Asset Objects）

每个 assets 对象代表编译产生的一个 output 文件。它们都遵循类似的结构：

json 复制代码

{
  "chunkNames": [], // 该资源包含的 chunk 名称
  "chunks": [10, 6], // 该资源包含的 chunk ID
  "comparedForEmit": false, // 指示是否将资源与输出文件系统上的同一文件进行比较
  "emitted": true, // 指示资源是否已生成到 `output` 目录
  "name": "10.web.js", // `output` 文件名
  "size": 1058, // 文件大小（字节）
  "info": {
    "immutable": true, // 指示资源是否可以长期缓存（包含哈希值）
    "size": 1058, // 大小（字节），仅在资源被发出后才可用
    "development": true, // 指示资源是否仅用于开发环境，不计入面向用户的资源
    "hotModuleReplacement": true, // 指示资源是否为更新现有应用（HMR）提供数据
    "sourceFilename": "originalfile.js", // 当资源从源文件创建时（可能经过转换）的源文件名
    "javascriptModule": true // 资源是否为 JavaScript 且为 ESM 模块
  }
}

Chunk 对象（Chunk Objects）

每个 chunks 对象代表一组模块，称为 chunk。每个对象遵循以下结构：

json 复制代码

{
  "entry": true, // 指示 chunk 是否包含 webpack runtime
  "files": [
    // 包含此 chunk 的文件名字符串数组
  ],
  "filteredModules": 0, // 参见上文[顶层结构](#structure)中的描述
  "id": 0, // 此 chunk 的 ID
  "initial": true, // 指示此 chunk 是在初始页面加载时加载还是[按需加载](/guides/lazy-loading)
  "modules": [
    // [模块对象](#module-objects)列表
    "web.js?h=11593e3b3ac85436984a"
  ],
  "names": [
    // 此 chunk 中包含的 chunk 名称列表
  ],
  "origins": [
    // 参见下面的描述...
  ],
  "parents": [], // 父 chunk 的 ID
  "rendered": true, // 指示 chunk 是否经过了代码生成
  "size": 188057 // Chunk 大小（字节）
}

chunks 对象还将包含一个 origins 列表，描述给定的 chunk 是如何产生的。每个 origins 对象遵循以下模式：

json 复制代码

{
  "loc": "", // 生成此 chunk 的代码行
  "module": "(webpack)\\test\\browsertest\\lib\\index.web.js", // 模块的路径
  "moduleId": 0, // 模块的 ID
  "moduleIdentifier": "(webpack)\\test\\browsertest\\lib\\index.web.js", // 模块的路径
  "moduleName": "./lib/index.web.js", // 模块的相对路径
  "name": "main", // chunk 的名称
  "reasons": [
    // 与[模块对象](#module-objects)中的 `reasons` 相同的列表
  ]
}

模块对象（Module Objects）

如果没有对编译后应用程序实际模块的描述，这些统计信息又有什么用呢？依赖图中的每个模块都由以下结构表示：

json 复制代码

{
  "assets": [
    // [资源对象](#asset-objects)列表
  ],
  "built": true, // 指示模块是否经过了 [Loaders](/concepts/loaders)、解析和代码生成
  "cacheable": true, // 模块是否可缓存
  "chunks": [
    // 包含此模块的 chunk ID
  ],
  "errors": 0, // 解析或处理模块时的错误数量
  "failed": false, // 此模块的编译是否失败
  "id": 0, // 模块的 ID（类似于 [`module.id`](/api/module-variables/#moduleid-commonjs)）
  "identifier": "(webpack)\\test\\browsertest\\lib\\index.web.js", // 内部使用的唯一 ID
  "name": "./lib/index.web.js", // 实际文件的路径
  "optional": false, // 对此模块的所有请求都使用 `try... catch` 块（与 ESM 无关）
  "prefetched": false, // 指示模块是否被 [prefetched](/plugins/prefetch-plugin)
  "profile": {
    // 与 [`--profile` 标志](/api/cli/#profiling) 对应的特定于模块的编译统计信息（毫秒）
    "building": 73, // 加载和解析
    "dependencies": 242, // 构建依赖
    "factory": 11 // 解析依赖
  },
  "reasons": [
    // 参见下面的描述...
  ],
  "size": 3593, // 模块的估计大小（字节）
  "source": "// Should not break it...\r\nif(typeof...", // 字符串化的原始源码
  "warnings": 0 // 解析或处理模块时的警告数量
}

每个模块还包含一个 reasons 对象列表，描述为什么该模块被包含在依赖图中。每个 "reason" 类似于上面 chunk 对象部分中看到的 origins：

json 复制代码

{
  "loc": "33:24-93", // 导致模块被包含的代码行
  "module": "./lib/index.web.js", // 基于 [context](/configuration/entry-context/#context) 的模块相对路径
  "moduleId": 0, // 模块的 ID
  "moduleIdentifier": "(webpack)\\test\\browsertest\\lib\\index.web.js", // 模块的路径
  "moduleName": "./lib/index.web.js", // 更具可读性的模块名称（用于"美化打印"）
  "type": "require.context", // 使用的[请求类型](/api/module-methods)
  "userRequest": "../../cases" // 用于 `import` 或 `require` 请求的原始字符串
}

入口对象（Entry Objects）

json 复制代码

"main": {
  "name": "main",
  "chunks": [
    179
  ],
  "assets": [
    {
      "name": "main.js",
      "size": 22
    }
  ],
  "filteredAssets": 0,
  "assetsSize": 22,
  "auxiliaryAssets": [],
  "filteredAuxiliaryAssets": 0,
  "auxiliaryAssetsSize": 0,
  "children": {},
  "childAssets": {},
  "isOverSizeLimit": false
}

错误和警告（Errors and Warnings）

errors 和 warnings 属性各自包含一个对象列表。每个对象包含一条消息、一个堆栈跟踪以及各种其他属性：

json 复制代码

{
  "moduleIdentifier": "C:\\Repos\\webpack\\test\\cases\\context\\issue-5750\\index.js",
  "moduleName": "(webpack)/test/cases/context/issue-5750/index.js",
  "loc": "3:8-47",
  "message": "Critical dependency: Contexts can't use RegExps with the 'g' or 'y' flags.",
  "moduleId": 29595,
  "moduleTrace": [
    {
      "originIdentifier": "C:\\Repos\\webpack\\test\\cases|sync|/^\\.\\/[^/]+\\/[^/]+\\/index\\.js$/",
      "originName": "(webpack)/test/cases sync ^\\.\\/[^/]+\\/[^/]+\\/index\\.js$",
      "moduleIdentifier": "C:\\Repos\\webpack\\test\\cases\\context\\issue-5750\\index.js",
      "moduleName": "(webpack)/test/cases/context/issue-5750/index.js",
      "dependencies": [
        {
          "loc": "./context/issue-5750/index.js"
        }
      ],
      "originId": 32582,
      "moduleId": 29595
    },
    {
      "originIdentifier": "C:\\Repos\\webpack\\testCases.js",
      "originName": "(webpack)/testCases.js",
      "moduleIdentifier": "C:\\Repos\\webpack\\test\\cases|sync|/^\\.\\/[^/]+\\/[^/]+\\/index\\.js$/",
      "moduleName": "(webpack)/test/cases sync ^\\.\\/[^/]+\\/[^/]+\\/index\\.js$",
      "dependencies": [
        {
          "loc": "1:0-70"
        }
      ],
      "originId": 8198,
      "moduleId": 32582
    }
  ],
  "details": "at RequireContextDependency.getWarnings (C:\\Repos\\webpack\\lib\\dependencies\\ContextDependency.js:79:5)\n    at Compilation.reportDependencyErrorsAndWarnings (C:\\Repos\\webpack\\lib\\Compilation.js:1727:24)\n    at C:\\Repos\\webpack\\lib\\Compilation.js:1467:10\n    at _next2 (<anonymous>:16:1)\n    at eval (<anonymous>:42:1)\n    at C:\\Repos\\webpack\\node_modules\\neo-async\\async.js:2830:7\n    at Object.each (C:\\Repos\\webpack\\node_modules\\neo-async\\async.js:2850:39)\n    at C:\\Repos\\webpack\\lib\\FlagDependencyExportsPlugin.js:219:18\n    at C:\\Repos\\webpack\\node_modules\\neo-async\\async.js:2830:7\n    at Object.each (C:\\Repos\\webpack\\node_modules\\neo-async\\async.js:2850:39)\n    at C:\\Repos\\webpack\\lib\\FlagDependencyExportsPlugin.js:40:16\n    at Hook.eval [as callAsync] (<anonymous>:38:1)\n    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\\Repos\\tapable\\lib\\Hook.js:18:14)\n    at Compilation.finish (C:\\Repos\\webpack\\lib\\Compilation.js:1462:28)\n    at C:\\Repos\\webpack\\lib\\Compiler.js:909:18\n    at processTicksAndRejections (internal/process/task_queues.js:75:11)\n",
  "stack": "ModuleDependencyWarning: Critical dependency: Contexts can't use RegExps with the 'g' or 'y' flags.\n    at Compilation.reportDependencyErrorsAndWarnings (C:\\Repos\\webpack\\lib\\Compilation.js:1732:23)\n    at C:\\Repos\\webpack\\lib\\Compilation.js:1467:10\n    at _next2 (<anonymous>:16:1)\n    at eval (<anonymous>:42:1)\n    at C:\\Repos\\webpack\\node_modules\\neo-async\\async.js:2830:7\n    at Object.each (C:\\Repos\\webpack\\node_modules\\neo-async\\async.js:2850:39)\n    at C:\\Repos\\webpack\\lib\\FlagDependencyExportsPlugin.js:219:18\n    at C:\\Repos\\webpack\\node_modules\\neo-async\\async.js:2830:7\n    at Object.each (C:\\Repos\\webpack\\node_modules\\neo-async\\async.js:2850:39)\n    at C:\\Repos\\webpack\\lib\\FlagDependencyExportsPlugin.js:40:16\n    at Hook.eval [as callAsync] (<anonymous>:38:1)\n    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\\Repos\\tapable\\lib\\Hook.js:18:14)\n    at Compilation.finish (C:\\Repos\\webpack\\lib\\Compilation.js:1462:28)\n    at C:\\Repos\\webpack\\lib\\Compiler.js:909:18\n    at processTicksAndRejections (internal/process/task_queues.js:75:11)\n"
}

W> 请注意，当 toJson 方法传入 errorStack: false 时，堆栈跟踪会被移除。errorStack 选项默认设置为 true。

帮助我们改进文档

发现翻译问题或内容错误？请告诉我们。