Stats Data

webpack으로 소스 코드를 컴파일 할 때, 사용자는 모듈에 대한 통계가 포함된 JSON 파일을 생성할 수 있습니다. 이러한 통계는 애플리케이션의 디펜던시 그래프를 분석하고 컴파일 속도를 최적화하는데 사용할 수 있습니다. 파일은 일반적으로 다음 CLI 커맨드로 생성됩니다.

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

--json=compilation-stats.json 플래그는 디펜던시 그래프 및 기타 다양한 빌드 정보가 포함된 compilation-stats.json을 내보내야 함을 webpack에게 나타냅니다. 일반적으로, --profile 플래그도 추가되어 모듈별 컴파일 통계가 포함된 각 modules 객체profile 섹션이 추가됩니다.

Structure

출력 JSON 파일의 최상위 구조는 매우 간단하지만 몇 가지 중첩된 데이터 구조도 있습니다. 각 중첩 구조에는 이 문서를 보다 유용하게 사용할 수 있도록 아래에 전용 섹션이 있습니다. 아래의 최상위 구조 내의 링크를 클릭하면 관련 섹션 및 문서로 이동할 수 있습니다.

Asset Objects

assets 객체는 컴파일에서 내보낸 output 파일을 나타냅니다. 모두 유사한 구조를 따릅니다.

{
  "chunkNames": [], // 이 애셋에 포함된 청크
  "chunks": [10, 6], // 이 애셋에 포함된 청크 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", // 애셋이 소스 파일에서 생성된 경우의 sourceFilename(변환될 수 있음)
    "javascriptModule": true // true, 애셋이 Javascript 및 EMS인 경우
  }
}

Chunk Objects

chunks 객체는 청크로 알려진 모듈 그룹을 나타냅니다. 각 객체는 다음의 구조를 따릅니다.

chunks 객체에는 주어진 청크가 어떻게 생성되었는지 설명하는 origins 목록도 포함됩니다. 각 origins 객체는 다음 스키마를 따릅니다.

Module Objects

컴파일된 애플리케이션의 실제 모듈에 대한 설명이 없으면 이런 통계가 무슨 의미가 있겠습니까? 의존성 그래프의 각 모듈은 다음 구조로 표시됩니다.

모든 모듈에는 해당 모듈이 의존성 그래프에 포함된 이유를 설명하는 reasons 객체 목록도 포함되어 있습니다. 각 "reason"은 위의 청크 객체 섹션에서 본 origins와 유사합니다.

Entry Objects

"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

errorswarnings 프로퍼티에는 각각 객체 목록이 포함되어 있습니다. 각 객체에는 메시지, 스택 추적 및 다양한 프로퍼티가 포함되어 있습니다.

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

8 Contributors

skipjackfranjohn21byzykEugeneHlushkosuperburritochenxsanrahul3vsnitin315

Translators