webpack-bundle-size-analyzer

Webpack Bundle Size Analyzer

A small utility to help you find out what is contributing to the size of your Webpack bundles.

Webpack has a JSON output mode which produces detailed machine-readable information about everything that has been included in a generated bundle.

This output is produced by running webpack --json. This tool analyzes the resulting JSON output and displays a tree of packages that were included in the bundle, ordered by the size of all the used modules.

For further reading on reducing the size of Webpack bundles, see their optimization guide

Usage

npm install -g webpack-bundle-size-analyzer
webpack --json > bundle-stats.json
analyze-bundle-size bundle-stats.json

When run on react-testing for example, it produces this output, where <self> refers to the size of the bundle's own code.

react: 641.95 kB (55.3%)
  <self>: 641.95 kB (100%)
chai: 125.8 kB (10.8%)
  deep-eql: 7.51 kB (5.97%)
    type-detect: 2.72 kB (36.2%)
      <self>: 2.72 kB (100%)
    <self>: 4.79 kB (63.8%)
  assertion-error: 2.29 kB (1.82%)
    <self>: 2.29 kB (100%)
  <self>: 116 kB (92.2%)
flummox: 73.46 kB (6.33%)
  flux: 9.01 kB (12.3%)
    <self>: 9.01 kB (100%)
  eventemitter3: 5.94 kB (8.08%)
    <self>: 5.94 kB (100%)
  uniqueid: 947 B (1.26%)
    <self>: 947 B (100%)
  object-assign: 484 B (0.643%)
    <self>: 484 B (100%)
  <self>: 57.12 kB (77.8%)
q: 58.84 kB (5.07%)
  <self>: 58.84 kB (100%)
...
<self>: 195.57 kB (16.9%)