Chunk trees become opaque with ModuleConcatenationPlugin in Webpack 3

[fruchtose]

Issue description

Webpack 3introduces the plugin webpack.optimize.ModuleConcatenationPlugin for bundle optimizations. When used in conjunction with BundleAnalyzerPlugin, some chunks do not show their dependencies. Where there would once be a tree, there instead is an opaque label " + modules". When the module concatenation plugin is removed, the tree becomes traceable again as expected.

Technical info

• Webpack Bundle Analyzer version: 2.9.0
• Webpack version: 3.5.6

[valscion]

Hi! Thanks for opening an issue :). Would you be able to send a screenshot or even better, create a small reproduction repository for this case?

Also, if at all possible, would you be able to zip your bundles and stats.json?

I fear that there's little we can do with this. Although I've been wrong before about how ModuleConcatenationPlugin and webpack bundle analyzer work together 😅. I don't (yet) use module concat in my day job code, so I haven't come across this issue myself yet.

[th0r]

Well, that's how ModuleConcatenationPlugin works. It concatenates (merges) multiple modules into a single one so they don't have "egdes" anymore - they don't have stat size, they can't be parsed to get real size etc.

What to you want to see inside of this concatenated module?

[fruchtose]

At the very least, it would be nice for the documentation to mention that this plugin is incompatible with ModuleConcatenationPlugin. People who are not so familiar with Webpack's internals (like myself) will not assume that the two are incompatible.

[th0r]

What do you mean by "incompatible"? It shows you that there is a merged module in your bundle that contains N other modules. It's an expected result if you understand what ModuleConcatenationPlugin does.

[fruchtose]

By "incompatible" I mean that this plugin prevents the user from exploring the full dependency tree when included. Sorry, I should have used different wording.

Generally, my point is that users may include the ModuleConcatenationPlugin without realizing it will prevent a full visualization of the dependency tree.

It's an expected result if you understand what ModuleConcatenationPlugin does.

It's not really obvious to everyone that ModuleConcatenationPlugin will interfere with this plugin. It's a lot to expect every Webpack programmer to both understand the internals of Webpack, the internals of ModuleConcatenationPlugin, and the internals of this tool. Since the maintainers of Webpack now recommend using that plugin to all users, I imagine that I am not the first user to run into this issue, and I won't be the last. Mentioning in the README that there are other plugins that interfere with this tool would go a long way to alleviating this issue.

[valscion]

Hey, great idea! Would you be open to craft a PR to modify the README to contain information about this?

[aciccarello]

Would there be any way for the bundle analyzer to at least list out the files that are included in the module? Currently I just seeing an index.js + 77 module file name. Even without the file sizes, knowing what files are included would be helpful.

If not maybe an issue should be opened upstream on webpack/webpack so see if a solution could be implemented in the ModuleConcatenationPlugin.

[valscion]

It depends on whether we have that information in the webpack generated stats.json. Care to look for any possible data we could use?