source-map-explorer icon indicating copy to clipboard operation
source-map-explorer copied to clipboard

Published 20 hours ago • verified publisher icon danvk

Support exploring things other than source maps

Open danvk opened this issue 6 years ago • 5 comments

I was wondering what what the major contributors to the size of a JSON file were today and thought it might be nice to visualize with a tree map!

This would obviously be a big change, but there are many things that could reasonably be visualized with tree maps:

  • Bundled JavaScript (which we do now)
  • JSON files
  • Directories on disk
  • ZIP files

@nikolay-borzov, thoughts?

danvk avatar Sep 17 '19 00:09 danvk

I think the way to do this would be to specify the --json output format of source-map-explorer and have a separate tool that reads that in and visualizes it.

danvk avatar Sep 17 '19 16:09 danvk

Could you provide an example what do you mean by contributors to JSON file size? Is JSON file somewhat bundled? I thought if a JSON is referenced within Webpack project it ends up inside a bundle and can be handled my current functionality.

nikolay-borzov avatar Sep 17 '19 17:09 nikolay-borzov

Sorry, I mean within a single JSON file. For example, I have a 50MB GeoJSON file. I'd like to know which is using more space: the geometries (coordinates) or properties? And within the properties, is it the keys? The values? A specific property? A tree map is a great way to answer this question.

danvk avatar Sep 17 '19 18:09 danvk

I think it should be a separate utility. I can't imagine how we can leverage most of the existing source-map-explorer code. Perhaps we can extract visualization logic into separate package

nikolay-borzov avatar Sep 17 '19 18:09 nikolay-borzov

Right, the idea is that source-map-explorer currently does two things:

  1. Figures out how many bytes of your JS file came from each source file.
  2. Visualizes a hierarchy of things with sizes.

You can do the first without the second (--json) but not the other way around, and I think there are uses for that. I'll think about what a good structure might be.

danvk avatar Sep 17 '19 21:09 danvk

I built this out as a separate utility a few years ago: https://github.com/danvk/webtreemap

danvk avatar Mar 14 '23 16:03 danvk