webpack-contrib / webpack-bundle-analyzer

Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap
MIT License
12.53k stars 479 forks source link

improvement: Display more detailed module information for concatenated entry modules #602

Closed pgoldberg closed 1 year ago

pgoldberg commented 1 year ago

Repro of this issue, also used to generate the bundle used in the test: https://github.com/pgoldberg/webpack-bundle-analyzer-concatenated-entry-modules

After migrating a large monorepo from Webpack 4 to Webpack 5, we noticed that we lost detailed entry module information, which made the bundle analyzer reports much less useful for us. After looking a little bit through the webpack-bundle-analyzer repo, I found this comment: https://github.com/webpack-contrib/webpack-bundle-analyzer/blob/e231c77064329fdd586e2e69f65d24f9a5a2004a/src/analyzer.js#L124-L126

Although we can't determine the parsed sizes of the concatenated modules, we should show the estimated parsed and gzipped sizes for the concatenated entry modules like we do for other concatenated modules. More explanation of the issue here: https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/602#issuecomment-1569548355

Here's a before and after:

image

After this change, here is what that same view looks like:

image
valscion commented 1 year ago

Huh, that's a neat change with such a small change! Are you able to write up some sort of test to verify this behavior?

pgoldberg commented 1 year ago

Huh, that's a neat change with such a small change! Are you able to write up some sort of test to verify this behavior?

Yep I'll add a test!

pgoldberg commented 1 year ago

@valscion I added a test, and also updated the PR to include the modules contained in the concatenated entry module's graph for the parsed and gzipped reports, too.

After thinking a bit more about this I think this is actually a bug and a regression in webpack-bundle-analyzer from Webpack 4 to Webpack 5. On Webpack 4, entry modules that were themselves concatenated modules still showed (inaccurate) parsed and gzipped sizes when that box was ticked.

On Webpack 5, because we can't determine the exact parsed size of the entry modules, we create a concatenated module containing the entry modules. For those modules, we do get estimated parsed and gzipped sizes, because they're all ContentModules.

However, the entry modules themselves can be concatenated modules. In that case, because we've created the module as a ContentModule rather than a ConcatenatedModule, we're not getting estimated sizes for the modules within the concatenated entry module.

I believe this bug fix should only affect entry modules, because this type of situation only really occurs when an entry module is a concatenated module. I don't think webpack would ever output a real concatenated module that is itself a concatenated module – this only happens because of the synthetic concatenated module we create of all the entry modules that we can't accurately parse.

The test I added was generated using this minimal repro I made: https://github.com/pgoldberg/webpack-bundle-analyzer-concatenated-entry-modules

pgoldberg commented 1 year ago

@valscion Thanks for the quick review! πŸ˜„

If you could cut a release whenever you get a chance, I'd really appreciate it πŸ™‚

valscion commented 1 year ago

Yeah ran out of time yesterday, I usually cut releases almost straight away. I'll do a new release now :)

valscion commented 1 year ago

Released now in v4.9.0! ☺️

pgoldberg commented 1 year ago

Thank you!!