Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Display imported by field in treemap view for modules #179

Open
guillaumeduboc opened this issue Jul 4, 2023 · 6 comments · May be fixed by btd/esbuild-visualizer#11
Open

Display imported by field in treemap view for modules #179

guillaumeduboc opened this issue Jul 4, 2023 · 6 comments · May be fixed by btd/esbuild-visualizer#11
Labels

Comments

@guillaumeduboc
Copy link

guillaumeduboc commented Jul 4, 2023

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

Capture d’écran 2023-07-04 à 09 57 20

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

I've been working on something that looks like this

Capture d’écran 2023-07-04 à 10 00 02

I'll open a pr as soon as possible

@guillaumeduboc guillaumeduboc changed the title Display imported by field in treemap view Display imported by field in treemap view for modules Jul 7, 2023
@guillaumeduboc guillaumeduboc linked a pull request Jul 8, 2023 that will close this issue
@CorentinDoue
Copy link

Awesome, I need this!

@btd
Copy link
Owner

btd commented Nov 27, 2023

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.

@btd btd transferred this issue from btd/esbuild-visualizer Dec 3, 2023
@guillaumeduboc
Copy link
Author

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
Copy link
Author

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
Copy link
Owner

btd commented Dec 9, 2023

Thanks for understanding, i will take a look

@btd
Copy link
Owner

btd commented Dec 9, 2023

Blocked by #183

@btd btd added the TODO label Dec 27, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants