Bundle analyzer metrics and data

Learn more about the bundle metrics and data extracted by bundle-stats for assets, modules and packages.

Assets

List of files generated by the bundler

  • webpack ignores assets that match excludeAssets webpack stats option
  • bundle-stats ignores assets with .map and .LICENSE.txt extensions

Data

NameDescription
SizeSize of the file outputted by the bundler
ChunkThe originating chunk
Asset typeBundler asset type: entry, initial, chunk, other
File typeOutput file type: JS, CSS, IMG, Media, Fonts, HTML, Other

Metrics

NameDescriptionChange up/down
Bundle SizeTotal file size of the assets generated or processed by the bundlerregression/improvement
Total size by typeTotal file size by file type(ex: CSS, JS, IMG, Media, Fonts, Html, and Other)regression/improvement
Initial JSTotal file size of the JavaScript initial chunksregression/improvement
Initial CSSTotal file size of the CSS initial chunksregression/improvement
Cache InvalidationRatio between the total file size of the changed assets and the total file size(Bundle Size)neutral
ChunksTotal number of chunks generated by the bundlerneutral
AssetsTotal number of assets generated or produced by the bundlerneutral

Learn more about asset path normalization

To identify and compare assets between different builds, bundle-stats extracts the hash from the file path when possible:

Hash digestBundler asset file pathbundle-stats asset normalized file path
hexassets/vendors.abc1234.js
assets/vendors-abc1234.js
assets/vendors_abc1234.js
assets/vendors.abc1234.js
assets/vendors.js
base64assets/vendors.fGEff4Ab.js
assets/vendors~fGEff4Ab.js
assets/vendors.js

To update your bundle configuration to use a common pattern for asset file paths, follow the corresponding guide:

Modules

List of modules included in the bundle

  • webpack ignores modules that match excludeModuleswebpack stats option
  • bundle-stats ignores modules that are not bundled into any chunks

Data

NameDescription
SizeWebpack - module source size before any transformation(ex: babel, typescript, etc) or production optimization(module hoisting, tree-shaking, minification, etc.)

Vite/rollup - module rendered or source size before any production optimization(module hoisting, tree-shaking, minification, etc.)

Read more about module size and chunk size
SourceFirst/Third party code
ChunkParent asset chunk
File typeModule file type: JS, CSS, Other

Module size and chunk size

Bundlers report specific sizes for each module, however, the value does not represent the actual size that the module contributes to the chunk output.

The reported values are based on different sources, either the module source or transformed, and do not consider the steps performed after the modules are combined into a chunk, such as module hoisting, tree-shaking, code duplication removal, minification, or bundler utilities.

While the reported total size of the modules belonging to a chunk is not equal to the chunk output size, bundle-stats analysis allows you to understand how module changes impact the chunk size.

Metrics

NameDescriptionChange up/down
ModulesTotal number of bundled modulesneutral
Duplicate Modules (bundle-stats@3.3.0)Total number of modules bundled into more than one chunkregression/improvement
Duplicate Code (bundle-stats@3.3.0)Percentage of total duplicate module size from the total module sizeneutral

From bundle-stats@v4, the modules metric counts all the duplicate module instances - bundle-stats#2122.

v1-v3v4
modules100110
duplicateModules1010

Packages

List of bundled packages

Data

NameDescription
SizeThe package total module size

Metrics

NameDescriptionChange up/down
PackagesTotal number of bundled packagesregression/improvement
Duplicate PackagesTotal number of duplicate packagesregression/improvement

Guides

Resources