webpack-contrib / webpack-bundle-analyzer

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

Don't understand the boxes :) #491

Closed emilmuller closed 1 year ago

emilmuller commented 2 years ago

Not sure if this is a webpack-bundle-analyzer thing, or if it's just happening because the statistics returned by Webpack is that way. Anyways, here is my output:

image

I'm wondering why node_modules is represented twice. I only have a single entry point in my webpack configuration. Why isn't e.g. mobx.esm.js under node_modules to the left?

Because node_modules is represented twice, I'm guessing the size calculation is incorrect for that one?

Kind regards, Emil

valscion commented 2 years ago

Because node_modules is represented twice, I'm guessing the size calculation is incorrect for that one?

I don't think that size calculation is incorrect here ☺️

It looks like the contents of node_modules directory in those boxes are different. The one on the right shows mobx, lodash and yup/es while the one on the right has react-dom, tippy.js, styled-components and some other modules. So they're different to what is shown on the right side box.

It looks like the index.tsx file and its dependencies have been concatenated inside it and you're viewing the chart with the "Show content of concatenated modules" checkbox enabled. If you'd uncheck that, you should see mobx.esm.js and the other node_modules get hidden away in the right side box.

webpack-bundle-analyzer shows you that the src/index.tsx concatenated module contains some node_modules in it, but not all.