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

UI - treemap charts #623

Closed
vio opened this issue Feb 18, 2020 · 13 comments
Closed

UI - treemap charts #623

vio opened this issue Feb 18, 2020 · 13 comments
Assignees
Labels
feature New feature or request

Comments

@vio
Copy link
Member

vio commented Feb 18, 2020

Rel: #624
Ref: webpack-contrib/webpack-bundle-analyzer#187

@jflayhart
Copy link

jflayhart commented Jan 26, 2021

I think this should be rather trivial since we're already generating the stats.json file from webpack, simply generate the HTML file along with it using webpack-bundle-analyzer and link to it.

@jflayhart
Copy link

jflayhart commented Jan 26, 2021

Which webpack file(s) need to be updated to add webpack-bundle-analyzer and then where would we need to send the html HTML file to the host server, so we can generate a link to it on the corresponding relative-ci page?

I was thinking it would be nice to have a simple link to the foam tree graph on the summary pages:
Screen Shot 2021-01-26 at 10 56 09 AM

@vio
Copy link
Member Author

vio commented Jan 26, 2021

@jflayhart the webpack-bundle-analyzer is a great tool and I believe they are doing their own parsing of the sources. Will be really complicated if not impossible to pack it in bundle-stats.

bundle-stats is already extracting and normalising the modules data from the webpack stats, so this issue is more about taking that data and displaying it in a tree map chart. The user can switch between the table and the chart view. It will display only the stat size, but from my experience that's a good enough metric to identify the biggest parts of a chunk.

The tree map library has been the main blocker for me, since the idea was to have the bundle-stats.html as light as possible (all the assets are inlined). The ones depending on D3 are great but they can be quite large. I think there are 2 options to unblock this:

  1. load the charting lib from a cdn
  2. look for a lighter treemap option - for example bundlephobia is using something custom

@vio
Copy link
Member Author

vio commented Jan 26, 2021

Here is a quick wireframe of the way i see this feature - https://excalidraw.com/#json=6277084896821248,1i-vE6IxVrVGQH8bt8Et-A. Let me know what do you think ;)

@jflayhart
Copy link

jflayhart commented Jan 29, 2021

the webpack-bundle-analyzer is a great tool and I believe they are doing their own parsing of the sources. Will be really complicated if not impossible to pack it in bundle-stats.

I dont know how your tool works per se, but all these analyzer tools need one thing: the webpack stats.json output file. You should already be generating that with your tool but webpack-bundle-analyser could have an orthogonal relationship with what YOUR tool spits out and simply be used to generate the separate module tree map. The rest is automatically generated by WBA into an HTML file that you host and link to. Which part are you saying is not possible?

I like the dedicated modules tab that's good.

Also, I get you want a lighter lib so that's fair, but webpack-bundle-analyzer is the OFFICIAL one for webpack therefore guaranteed to use all the same inputs you should already be generating as the stats output webpack created. Have you tried this w/ your tool and found that's not the case? I use both ur tool and WBA at Shipt.

I was thinking your tool does what it needs and in parallel you could process the same build (if you can't reuse the same stats file for both) with WBA to simply output the HTML file to some CDN:

bundle-stats -> process -> output
WBA -> process -> output html (would need uuid as file name and something to create relationship with the file to PR/build).

@jflayhart
Copy link

jflayhart commented Jan 29, 2021

P.S. I guess what I am saying for this UI bit you don't need to necessarily pack WBA into bundle-stats lib itself, you just want it as a means to an end to generate the module graph for RelativeCI GUI, so bundle-stats shouldn't be affected by this unless you want it to be packaged as part of your tool.

@vio
Copy link
Member Author

vio commented Jan 31, 2021

@jflayhart both of the packages are working in a similary way:

  1. extract data (webpack-plugin, stats.json file)
  2. manipulate
  3. report

What i was trying to convey is that bundle-stats is already having the modules data available, it only needs the chart visualisation. We might not need to bring another full reporting tool just for that(not very knowledgeable of the visualisation lib they are using, at a quick glance is looking like it is not open source).

Here is a high level diagram on how everything is working together:

bundle-stats-chart

@vio vio added this to the v3.2.0 milestone Jul 21, 2021
@vio vio pinned this issue Sep 2, 2021
@vio vio modified the milestones: v3.2.0, v3.3.0 Oct 13, 2021
@vio vio modified the milestones: v3.4.0, v4, v3.5.0 Mar 26, 2022
@vio vio removed this from the v4.2.0 milestone Jan 11, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Aug 2, 2023

This issue is stale because it has been open for 30 days with no activity.

@github-actions github-actions bot added the stale label Aug 2, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Sep 2, 2023

This issue was closed because it has been inactive for 30 days since being marked as stale.

@github-actions github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale Sep 2, 2023
@vio vio removed the stale label Sep 3, 2023
@vio vio reopened this Sep 3, 2023
Copy link
Contributor

github-actions bot commented Dec 4, 2023

This issue is stale because it has been open for 90 days with no activity.

@github-actions github-actions bot added the stale label Dec 4, 2023
@vio vio removed the stale label Dec 10, 2023
@vio vio changed the title UI: Modules - tree map graph UI - treemap charts Feb 21, 2024
@vio vio added this to the 4.13.0 - treemaps milestone Mar 4, 2024
@vio vio self-assigned this Mar 4, 2024
@vio
Copy link
Member Author

vio commented Mar 14, 2024

Available for testing and for feedback on v4.13.0-beta.2:

bundle-stats-treemap.mp4

Related tasks:

@vio vio unpinned this issue Mar 22, 2024
@vio vio mentioned this issue Mar 24, 2024
@vio vio pinned this issue Mar 27, 2024
@vio
Copy link
Member Author

vio commented May 13, 2024

bundle-stats@4.13.0-rc.0

  • grouped assets/modules/packages by folder
bundle-stats@4.13.0-rc.0.mp4

@vio
Copy link
Member Author

vio commented Jun 3, 2024

Released on v4.13.0. Feel free to open a new issue if you encounter any problems or have any feedback to share.

bundle-stats-treemap.mp4

@vio vio closed this as completed Jun 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants