Webpack：Stats Data

2023-05-10 14:47 更新

使用 webpack 編譯源碼時(shí)，用戶可以生成一個(gè)包含模塊統(tǒng)計(jì)信息的 JSON 文件。這些統(tǒng)計(jì)信息可以用來(lái)分析應(yīng)用中的依賴關(guān)系圖，從而優(yōu)化 webpack 的編譯速度。該文件通常由以下 CLI 命令生成：

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

?--json=compilation-stats.json? 標(biāo)志告訴 webpack 生成一個(gè)包含依賴關(guān)系圖和其他各種構(gòu)建信息的 ?compilation-stats.json? 文件。通常情況下，?--profile? 標(biāo)志也會(huì)被添加，這樣的話每個(gè) module objects 都會(huì)增加一個(gè) profile 部分，它包含了特定模塊的統(tǒng)計(jì)信息。

庭院 配置結(jié)構(gòu)（Structure）

輸出 JSON 文件的頂層結(jié)構(gòu)相當(dāng)簡(jiǎn)單，但是也包含部分嵌套的數(shù)據(jù)結(jié)構(gòu)。為了讓文檔更易于使用，每個(gè)嵌套的數(shù)據(jù)結(jié)構(gòu)都有對(duì)應(yīng)的一小節(jié)來(lái)講，注意，你可以點(diǎn)擊如下的鏈接，跳轉(zhuǎn)到相關(guān)章節(jié)查看文檔：

{
  "version": "5.9.0", // 用來(lái)編譯的 webpack 版本
  "hash": "11593e3b3ac85436984a", // 編譯的特定哈希值
  "time": 2469, // 編譯時(shí)間（毫秒）
  "publicPath": "auto",
  "outputPath": "/", // webpack 的輸出目錄路徑
  "assetsByChunkName": {
    // 輸出資源對(duì)應(yīng)的 Chunk 名稱
    "main": [
      "web.js?h=11593e3b3ac85436984a"
    ],
    "named-chunk": [
      "named-chunk.web.js"
    ],
    "other-chunk": [
      "other-chunk.js",
      "other-chunk.css"
    ]
  },
  "assets": [
    // asset objects 列表
  ],
  "chunks": [
    // chunk objects 列表
  ],
  "modules": [
    // module objects 列表
  ],
  "entryPoints": {
    // entry objects 列表
  },
  "errors": [
    // error objects 列表
  ],
  "errorsCount": 0, // 錯(cuò)誤個(gè)數(shù)
  "warnings": [
    // warning objects 列表
  ],
  "warningsCount": 0, // 告警個(gè)數(shù)
}

Asset 對(duì)象

每個(gè) assets 對(duì)象表示編譯過(guò)程中生成的 output 文件。它們都遵循類似的結(jié)構(gòu)：

{
  "chunkNames": [], // 該資源文件包含的 chunks
  "chunks": [ 10, 6 ], // 該資源文件包含的 chunk ID
  "comparedForEmit": false, // 指定是否對(duì)該資源文件和輸出文件系統(tǒng)上相同文件進(jìn)行比較
  "emitted": true, // 指定資源文件是否要生成到 `output` 目錄中
  "name": "10.web.js", // `output` 文件名
  "size": 1058, // 文件大?。ㄗ止?jié)為單位）
  "info": {
    "immutable": true, // 指定 asset 是否可以長(zhǎng)期緩存的標(biāo)志位（包括哈希值）
    "size": 1058, // 單位大小為字節(jié)，只有在資源文件生成之后才可以使用
    "development": true, // 指定 asset 是否只用于 development 環(huán)境，而不面向用戶的標(biāo)志位
    "hotModuleReplacement": true, // 指定 asset 是否加載用于更新現(xiàn)有應(yīng)用程序 (HMR) 的數(shù)據(jù)標(biāo)志位
    "sourceFilename": "originalfile.js", // 從源文件創(chuàng)建資產(chǎn)時(shí)（可能轉(zhuǎn)換）sourceFilename
    "javascriptModule": true // 當(dāng) asset 是 javascript 和 ESM 時(shí)為 true
  }
}

Chunk 對(duì)象

每個(gè) chunks 對(duì)象代表一組名為 chunk 的模塊。每個(gè)對(duì)象都遵循如下結(jié)構(gòu)：

{
  "entry": true, // 指定 webpack 運(yùn)行時(shí)是否包含 chunk
  "files": [
    // 包含 chunk 的文件名字符數(shù)組
  ],
  "filteredModules": 0, // 查看關(guān)于 [top-level structure](#structure) 描述
  "id": 0, // chunk 對(duì)應(yīng)的 ID
  "initial": true, // 指定 chunk 是在頁(yè)面初始化時(shí)加載還是[按需加載](/guides/lazy-loading)
  "modules": [
    // [module objects](#module-objects) 列表
    "web.js?h=11593e3b3ac85436984a"
  ],
  "names": [
    // 包含當(dāng)前 chunk 的 chunk 名稱列表
  ],
  "origins": [
    // 查看后面的描述...
  ],
  "parents": [], // 父級(jí) chunk ID
  "rendered": true, // 指定 chunk 是否經(jīng)過(guò)代碼生成
  "size": 188057 // chunk 大小，單位字節(jié)
}

chunks 對(duì)象還包含一個(gè) origins 列表，它描述來(lái)給定的 chunk 每個(gè) origins 對(duì)象都遵循以下模式：

{
  "loc": "", // 生成當(dāng)前 chunk 的代碼行
  "module": "(webpack)\\test\\browsertest\\lib\\index.web.js", // module的路徑
  "moduleId": 0, // module 對(duì)應(yīng)的 ID
  "moduleIdentifier": "(webpack)\\test\\browsertest\\lib\\index.web.js", // module 對(duì)應(yīng)的路徑
  "moduleName": "./lib/index.web.js", // module對(duì)應(yīng)的相對(duì)路徑
  "name": "main", // chunk 名稱
  "reasons": [
    // 在 [module objects](#module-objects) 中找到相同的 `reason` 列表
  ]
}

Module 對(duì)象

假如不描述編譯后的應(yīng)用程序的實(shí)際模塊，這些統(tǒng)計(jì)的數(shù)據(jù)有什么作用？其依賴關(guān)系圖中的每個(gè)模塊用如下結(jié)構(gòu)表示：

{
  "assets": [
    // [asset objects](#asset-objects) 列表
  ],
  "built": true, // 指定該模塊經(jīng)過(guò) [Loaders](/concepts/loaders)、解析和代碼生成
  "cacheable": true, // 是否可以緩存
  "chunks": [
    // 當(dāng)前模塊包含的 chunk ID
  ],
  "errors": 0, // 解析或處理模塊時(shí)的錯(cuò)誤個(gè)數(shù)
  "failed": false, // 當(dāng)前模塊編譯是否失敗
  "id": 0, // 模塊 ID (類似于 [`module.id`](/api/module-variables/#moduleid-commonjs))
  "identifier": "(webpack)\\test\\browsertest\\lib\\index.web.js", // 內(nèi)部使用的唯一 ID
  "name": "./lib/index.web.js", // 實(shí)際文件的路徑
  "optional": false, // 對(duì)當(dāng)前模塊的所有請(qǐng)求都帶上 `try... catch` blocks (與 ESM 無(wú)關(guān))
  "prefetched": false, // 指定模塊是否被 [prefetched](/plugins/prefetch-plugin)
  "profile": {
    // 對(duì)應(yīng)于 [`--profile` 標(biāo)志位](/api/cli/#profiling) 的模塊特定編譯統(tǒng)計(jì)（以毫秒為單位）
    "building": 73, // 加載和解析
    "dependencies": 242, // 構(gòu)建依賴
    "factory": 11 // 解析依賴關(guān)系
  },
  "reasons": [
    // 查看下面的描述...
  ],
  "size": 3593, // 預(yù)估模塊大小，單位為字節(jié)
  "source": "http:// 不要改變它...\r\nif(typeof...", // 字符串的原始源頭
  "warnings": 0 // 解析或處理模塊時(shí)的警告數(shù)
}

每個(gè)模塊還包含了一個(gè) reasons 列表，它描述了為什么該模塊會(huì)被包含在依賴關(guān)系圖中。每個(gè) reason 都類似于上面的 chunk objects 章節(jié)的 origins：

{
  "loc": "33:24-93", // 當(dāng)前模塊包含的代碼行數(shù)
  "module": "./lib/index.web.js", // 基于 [context](/configuration/entry-context/#context) 的模塊相對(duì)路徑
  "moduleId": 0, // 模塊對(duì)應(yīng)的 ID
  "moduleIdentifier": "(webpack)\\test\\browsertest\\lib\\index.web.js", // 模塊對(duì)應(yīng)路徑
  "moduleName": "./lib/index.web.js", // 可讀性更高的模塊名稱
  "type": "require.context", // 使用的 [請(qǐng)求類型](/api/module-methods)
  "userRequest": "../../cases" // 用于 `import` 或者 `require` 請(qǐng)求的原始字符串
}

Entry 對(duì)象

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

錯(cuò)誤和告警信息

包含 errors and warnings 屬性的一個(gè)對(duì)象列表。每個(gè)對(duì)象包含一條消息，一個(gè)堆棧跟蹤信息和其他各種屬性：

{
  "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"
}


以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)