Display `imported by` field in treemap view for modules

[guillaumeduboc]

Hey @btd,

I've been using your library to understand my bundles. I often have big node_modules and small src code

• In my treemap view I don't really understand why big libraries are present
• in the network view, I can't find the entrypoint of the library I'm interested in easily to find where I import it in my code

There is an imported by display in the treemap view but only for individual files. It mixes imports from an installed package and imports by our source code

It would be great to see for entire modules, where they are imported

I've been working on something that looks like this

I'll open a pr as soon as possible

[CorentinDoue]

Awesome, I need this!

[btd]

Hi, thank you for issue and implementation. I like the idea but i cannot merge it. I maintain master copy of UI in rollup plugin and copy implementation from time to time to this package as it is not dependent from bundler.

If i start to merge PR there i will not be able to sync it. not with my limited capacity to maintain both plugins.

It would be nice if you can copy you PR against rollup plugin. If not i can eventually copy your changes.

[guillaumeduboc]

Hey @btd, I looked into simply copying the PR to the rollup plugin but I think it won't be sufficient. It seems the tree built from the esbuild and rollup outputs are not the same (for node_modules/d3-hierarchy/src/ for example). Hence, my compute is not complete and imports are not tracked correctly in the rollup plugin

After a bit of deep diving, here's what I found : Rollup doesn't have the same values in its outputBundle than esbuild in its metadata.outputs

for example for the treemap bundle, esbuild will list node_modules/d3-hierarchy/src/index.js in the outputs but roolup will ignore this file from its outputsBundle

Because of this, the rollup plugin data has a missing piece to track which file imports a module. That link would normally be the node_modules/d3-hierarchy/src/index.js. Do you have an idea to get around this problem ?

[guillaumeduboc]

Here is the outputBundle for the rollup plugin

output-bundle.json

you can see that there is no moduleId for the /user/rollup-plugin-visualizer/node_modules/d3-hierarchy/src/index.js file but /user/rollup-plugin-visualizer/src/treemap/index.tsx specifies it in its importedIds (in the moduleInfos)

[btd]

Thanks for understanding, i will take a look

[btd]

Blocked by https://github.com/btd/rollup-plugin-visualizer/issues/183