@webpack-bundle-analyzer/bundle-parser

@webpack-bundle-analyzer/bundle-parser

Calculates module sizes from webpack output files.

Install

npm install --save @webpack-bundle-analyzer/bundle-parser

Usage

const parseBundle = require('@webpack-bundle-analyzer/bundle-parser');
const Logger = require('@webpack-bundle-analyzer/logger');

const fs = require('fs');
const webpackStats = JSON.parse(
  fs.readFileSync('webpack/output/path/stats.json', 'utf8')
);

const logger = new Logger('info');

const moduleSizeData = parseBundle(
  webpackStats,
  'webpack/output/path',
  logger
);

console.log(JSON.stringify(moduleSizeData, null, 2));

Example output:

[
  {
    "label": "bundle.js",
    "statSize": 141,
    "parsedSize": 445,
    "gzipSize": 178,
    "groups": [
      {
        "label": "my-app",
        "path": "./my-app",
        "statSize": 141,
        "parsedSize": 332,
        "gzipSize": 119,
        "groups": [
          {
            "label": "src",
            "path": "./my-app/src",
            "statSize": 141,
            "parsedSize": 332,
            "gzipSize": 119,
            "groups": [
              {
                "id": 0,
                "label": "index.js",
                "path": "./my-app/src/index.js",
                "statSize": 54,
                "parsedSize": 131,
                "gzipSize": 93
              },
              {
                "id": 1,
                "label": "a.js",
                "path": "./my-app/src/a.js",
                "statSize": 29,
                "parsedSize": 67,
                "gzipSize": 73
              },
              {
                "id": 2,
                "label": "b.js",
                "path": "./my-app/src/b.js",
                "statSize": 29,
                "parsedSize": 67,
                "gzipSize": 73
              },
              {
                "id": 3,
                "label": "a-clone.js",
                "path": "./my-app/src/a-clone.js",
                "statSize": 29,
                "parsedSize": 67,
                "gzipSize": 73
              }
            ]
          }
        ]
      }
    ]
  }
]

Options

parseBundle(
  bundleStats: object,
  bundleDir: string,
  options: {
    logger: Logger
  }
);

Name	Type	Description
bundleStats	{Object}	webpack compilation information as a JSON object. This is the output of stats.toJson() webpack Node.js API.
bundleDir	{String}	Path to directory containing webpack output files, i.e. the value of output.path webpack config.
options.logger	{Logger}	An instance of a special Logger class also used in webpack-bundle-analyzer.

Size definitions

Data contains three sizes for each module if bundle parsing has succeeded, or only statSize if bundle parsing has failed for some reason.

statSize

The "input" size of modules, before any transformations like minification.

parsedSize

The "output" size of modules. If you're using a webpack plugin such as Uglify, then this value will reflect the minified size of your code.

gzipSize

Size approximation of running the parsed modules through gzip compression.

Gzip sizes of folders are calculated by concatenating the parsed sources of all modules inside a folder and running gzip-size over it.

Troubleshooting

Some inner modules are missing from the data

This is a known caveat when webpack.optimize.ModuleConcatenationPlugin is used. The way ModuleConcatenationPlugin works is that it merges multiple modules into a single one, and so that resulting module doesn't have edges anymore.

If you are interested to drill down to exact dependencies, try parsing output without ModuleConcatenationPlugin applied. See issue #115 for more discussion.

Maintainers

Yuriy Grunin

Vesa Laakso