Report post-minified sizes

[paulirish]

In #9 you mentioned this reports pre-minified sizes.
It'd be great to see the sizes after minification instead, as most bundles are used in production.

[chrisbateman]

Unfortunately this isn't really possible - at least with the website version of this tool.

Webpack's stats.json includes data about each module (where it sits in your node_modules, why it was included, post-loader size and source), but minification happens in a plugin, which is executed on the full bundle. It includes the names and final sizes of the final generated assets - but that's about it.

Some bad options:

• Estimate the minified size of each modules using the pre-minified percentage multiplied by the total post-minified size (would be close but not completely accurate since some modules will minifiy more efficiently than others).
• Smash all the modules together and run UglifyJS on it (but it wouldn't be the actual webpack bundle, and the Uglify config might not be the same as the user's).

The webpack plugin version of this tool might have a shot at doing this since it has access to more info than just the stats.json file. I'll see if I can look into that at least.

There are some alternative approaches out there, such as analyzing your source maps - see source-map-explorer. Maybe that's the way to go....

[jdalton]

FWIW webpack.github.io/analyse/ shows the minified sizes.

[chrisbateman]

@jdalton I don't think so - the sizes for each file look exactly the same.

[jdalton]

Ah you're right. So then webpack-bundle-analyzer maybe. From its readme:

And the best thing is it supports minified bundles! It parses them to get real size of bundled modules.

[chrisbateman]

Yeah, the plugin is the way to go here, since it has access to more info than stats.json has.

[chrisbateman]

We're now displaying actual/minfied sizes in most cases. Unfortunately it's just an esimate based on the raw percentages - but comparing with some tools that have the ability to be more accurate - the estimate is pretty close - usually within 1K for bigger modules.

I'm not sure we'll be able to swing gzipped sizes for the web version, but we might make it happen for the plugin version. Discussion here: #23

[mikeaustin]

It would really nice to have a visual tool such as webpack-visualizer with the preciceness of webpack-bundle-analyzer! I found https://www.npmjs.com/package/webpack-bundle-analyzer-sunburst which comes close, but to be honest, webpack-visualizer has the best UX.