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
npm install -g webpack-bundle-size-analyzer
webpack --json | webpack-bundle-size-analyzer
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%)
The statistics reported for modules in Webpack's JSON output do take into account transformations resulting from loaders, but not plugins which operate on the whole generated bundle.
The recommended approach to minifying JavaScript in Webpack bundles is to use the UglifyJS plugin, which operates on the whole bundle. Consequently the stats shown by webpack-bundle-size-analyzer will report sizes before minification. This should still give a pretty good idea of what contributes to your bundle size but some libraries will compress better than others, so they can be misleading.
A workaround is to generate a Webpack build using the UglifyJS loader instead and use the JSON output from that. Since the loader runs on individual files before they are bundled, the accounting will be correct.