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

{
  "version": "5.9.0", // 컴파일에 사용된 webpack 버전
  "hash": "11593e3b3ac85436984a", // 컴파일 특정 해시
  "time": 2469, // 컴파일 시간 밀리초
  "publicPath": "auto",
  "outputPath": "/", // webpack 출력 디렉터리 경로
  "assetsByChunkName": {
    // 내보낸 애셋 매핑에 대한 청크 이름
    "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": [
    // [에러 객체](#errors-and-warnings) 목록
  ],
  "errorsCount": 0, // 오류 개수
  "warnings": [
    // [경고 객체](#errors-and-warnings) 목록
  ],
  "warningsCount": 0 // 경고 개수
}

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 객체는 청크로 알려진 모듈 그룹을 나타냅니다. 각 객체는 다음의 구조를 따릅니다.

{
  "entry": true, // 청크에 webpack 런타임이 포함되었는지 여부
  "files": [
    // 이 청크를 포함하는 파일 이름 문자열의 배열
  ],
  "filteredModules": 0, // 위의 [top-level structure](#structure) 설명 참고
  "id": 0, // 이 청크의 ID
  "initial": true, // 이 청크가 초기 페이지 로드 시 로드되는지 아니면 [on demand](/guides/lazy-loading) 시 로드되는지 여부
  "modules": [
    // [모듈 객체](#module-objects) 목록
    "web.js?h=11593e3b3ac85436984a"
  ],
  "names": [
    // 이 청크에 포함된 청크 이름 목록
  ],
  "origins": [
    // 아래 설명 참고...
  ],
  "parents": [], // 상위 청크 ID
  "rendered": true, // 청크가 코드 제너레이션을 거쳤는지 여부
  "size": 188057 // 청크 크기(바이트)
}

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

{
  "loc": "", // 이 청크를 생성한 코드 라인
  "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", // 청크 이름
  "reasons": [
    // [module objects](#module-objects)에서 찾은 동일한 `reasons` 목록
  ]
}

Module Objects

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

{
  "assets": [
    // [애셋 객체](#asset-objects) 목록
  ],
  "built": true, // 모듈이 [로더](/concepts/loaders), 파싱 및 코드 제너레이션을 거쳤음을 의미
  "cacheable": true, // 모듈이 캐시 가능한지 여부
  "chunks": [
    // 모듈을 포함하는 청크 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` flag](/api/cli/#profiling)에 해당하는 모듈별 컴파일 통계 (밀리초 단위)
    "building": 73, // 로드 및 파싱
    "dependencies": 242, // 의존성 구축
    "factory": 11 // 의존성 해석
  },
  "reasons": [
    // 아래 설명 참고...
  ],
  "size": 3593, // 모듈 예상 크기(바이트)
  "source": "// Should not break it...\r\nif(typeof...", // 문자열화된 원시 소스
  "warnings": 0 // 모듈을 해석하거나 처리할 때 경고의 수
}

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

{
  "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", // 모듈의 더 읽기 쉬운 이름 ("pretty-printing"에 사용됨)
  "type": "require.context", // [type of request](/api/module-methods) 사용
  "userRequest": "../../cases" // `import` 또는 `require` 요청에 사용되는 원시 문자열
}

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

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

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