Don't understand the boxes :)

[emilmuller]

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:

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]

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.