created: 2023-06-26T07:36:42.437Z

webpack でコンパイル処理の内容を詳細に出してくれる stats データ

webpack はオプションでコンパイル処理の詳細を出力してくれる。

--profile オプションをつければよい
--json オプションを使えばjson形式でデータが出てくるので扱いやすい

npx webpack --profile --json=/tmp/webpack-stats.json

Stats Data | webpack

どんなデータがとれるか

asset と chunk と module という三種類のデータ構造が登場する。

module

module は chunk の構成要素、という扱い
が、ビルド周りの文章ではとにかく「モジュール」という言葉がたくさん出てくるため、それ以上は文脈で判断
- js の「モジュール」
- 一般的なプログラミングにおける「モジュール」
- いろいろある

例

{
  "assets": [
    // A list of [asset objects](#asset-objects)
  ],
  "built": true, // Indicates that the module went through [Loaders](/concepts/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 (analogous to [`module.id`](/api/module-variables/#moduleid-commonjs))
  "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](/plugins/prefetch-plugin)
  "profile": {
    // Module specific compilation stats corresponding to the [`--profile` flag](/api/cli/#profiling) (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
}

chunk

Under The Hood | webpack

chunk は webpack 独自の概念

基本的にはバンドルと対応するものだが、1バンドルに複数チャンク生成される設定もある
- エントリーポイントごとにチャンクが作られる、と思っていてよさそう
initial と non-initial の二種類がある
- たとえば Dynamic Import をしているものは non-initial

例

{
  "entry": true, // Indicates whether or not the chunk contains the webpack runtime
  "files": [
    // An array of filename strings that contain this chunk
  ],
  "filteredModules": 0, // See the description in the [top-level structure](#structure) above
  "id": 0, // The ID of this chunk
  "initial": true, // Indicates whether this chunk is loaded on initial page load or [on demand](/guides/lazy-loading)
  "modules": [
    // A list of [module objects](#module-objects)
    "web.js?h=11593e3b3ac85436984a"
  ],
  "names": [
    // An list of chunk names contained within this chunk
  ],
  "origins": [
    // See the description below...
  ],
  "parents": [], // Parent chunk IDs
  "rendered": true, // Indicates whether or not the chunk went through Code Generation
  "size": 188057 // Chunk size in bytes
}

asset

chunk の集まり
webpack のドキュメントにでてくる asset という言葉と意味が違う気がする
- 画像やCSSをwebpackに面倒見てもらうとこのへんわかるのかもしれない(確認していない)

Each assets object represents an output file emitted from the compilation. They all follow a similar structure:

例

{
  "chunkNames": [], // The chunks this asset contains
  "chunks": [10, 6], // The chunk IDs this asset contains
  "comparedForEmit": false, // Indicates whether or not the asset was compared with the same file on the output file system
  "emitted": true, // Indicates whether or not the asset made it to the `output` directory
  "name": "10.web.js", // The `output` filename
  "size": 1058, // The size of the file in bytes
  "info": {
    "immutable": true, // A flag telling whether the asset can be long term cached (contains a hash)
    "size": 1058, // The size in bytes, only becomes available after asset has been emitted
    "development": true, // A flag telling whether the asset is only used for development and doesn't count towards user-facing assets
    "hotModuleReplacement": true, // A flag telling whether the asset ships data for updating an existing application (HMR)
    "sourceFilename": "originalfile.js", // sourceFilename when asset was created from a source file (potentially transformed)
    "javascriptModule": true // true, when asset is javascript and an ESM
  }
}