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

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

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

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

どんなデータがとれるか

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

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

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
  }
}
トラクターの世界史 人類の歴史を変えた「鉄の馬」たち (中公新書)
[ad] トラクターの世界史 人類の歴史を変えた「鉄の馬」たち (中公新書)
藤原辰史 (Kindle版)