Webpack-bundle-analyzer: Discussion: Reconsider showing breakdown of concatenated modules

Created on 6 Jun 2018 · 6Comments · Source: webpack-contrib/webpack-bundle-analyzer

I'm opening this issue to consolidate discussion around showing contents of concatenated modules.

Original issues and implementation pull requests:

Problems and concerns related to this feature:

Quick summary of #161, quoting @mpontus https://github.com/webpack-contrib/webpack-bundle-analyzer/issues/161#issuecomment-372613671, emphasis mine:

This change however is not reflected in the grid drawn by webpack-bundle-analyzer. If I'm interpreting it correctly, it still shows as if all modules from "ramda/es" have been included into the bundle.

Individual import:

Destructuring import

I believe parsed size is accurate.

If I change the code to use a few other functions imported from "ramda/es" like this:
import { add, concat, compose } from "ramda/es";

document.write(compose(concat("Hello"), add(2))(3));

The crux of the issue can be summed up by @th0r's comment here https://github.com/webpack-contrib/webpack-bundle-analyzer/issues/161#issuecomment-372639176:

The thing is actual dead code elimination is done by UglifyJSPlugin, not webpack itself. Webpack just packs and annotates source code in the way that UglifyJS will be able to determine unused code and remove it from the resulting bundle.

This is the reason you see a lot of actually "excluded" modules under concatenated module - webpack concatenated them all but UglifyJS removed all the unused ones.

Given that we are now in a situation where webpack-bundle-analyzer might show incorrect information instead vs. "less information", we should reconsider if the tradeoff of showing breakdown of concatenated modules contents is a good thing after all.

This tradeoff can be one of the reasons why the upcoming webpack-bundle-analyzer support for create-react-app could be removed: https://github.com/facebook/create-react-app/issues/4563#issuecomment-394959241

/cc @bugzpodder @th0r @joshwcomeau @gaearon

Discussion 2 (urgent)

Source

valscion

👍2

Most helpful comment

This issue has been resolved by the new v3 version :tada:

valscion on 11 Sep 2018

👍4

All 6 comments

@sokra can we do something about it? Can webpack provide more accurate data about contents of concatenated modules?

th0r on 6 Jun 2018

I fear that until webpack can do dead-code elimination the same way UglifyJS can, we'll be a bit out of luck about this 😕

valscion on 6 Jun 2018

I think we should remove support for showing tree shaken module information, as it is misleading. See another example by @generalov here: https://github.com/facebook/create-react-app/issues/4563#issuecomment-401549458

What do you think, @th0r? Should we disable this feature until we can figure out of webpack supports not showing tree-shaken modules?

valscion on 30 Jun 2018

This issue has been resolved by the new v3 version :tada:

valscion on 11 Sep 2018

👍4

@valscion what does 'solved' mean? I'm new to the analyzer. I see there's a checkbox to show it but it may be inaccurate. Is that what you meant? I assume the same inaccuracies with respect to UglifyJS still apply? Thx.