Comprehensive size breakdown for package and dependency tree

[Mopsgamer]

Describe the feature

I'd like to propose adding a dual-size view for package pages in npmx that displays 5 different sizes for all its dependencies.

1. pkg tarball (= download size)
2. extracted (= size on disk)
3. tarballs of pkg + all transitive deps (= total download size)
4. extracted (= total size on disk)
5. bundled (= approx. max size in your app)

Ref #1005
Ref https://bsky.app/profile/philippeserhal.com/post/3mew66vs2ec2p

Currently, understanding the weight of a dependency requires hopping between different tools, each with specific limitations:

• npmgraph: Provides a single number for the total unpacked size of the selected package, but offers no info on individual dependency sizes unless you click each one.

• node-modules.dev: I can only see the unpacked size for dependencies; the total unpacked size is only shown for the root package.

Ideas

• A "Progress" style bar: Similar to pkg-size, where you can visually see the ratio of a package's own code versus its dependencies.

• A Treemap diagram: Each slice would represent a dependency-clicking a slice should zoom in to show that specific sub-tree's breakdown.

• Dual Size Columns: Similar to the existing "code" sub-page, show both Own Size and Total Size (including sub-deps) in columns next to the package name in a file-system-like tree.

  • The ability to sort this tree by Total Size, Own Size ... and Popularity.

Additional information

• Would you be willing to help implement this feature?

Final checks

• Read the contribution guide.
• Check existing issues.