Describe the feature
This feature would display the total unpacked size for each individual dependency.
While we can expand on specific metrics later, the initial goal is to integrate this data into the dependency table within the sidebar - mirroring the information currently found in the header of each dependency's page.
To improve clarity, we could also move size information to a dedicated section under the header (collapsed secondary header). This could be visualized as a distribution bar.
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
Final checks
Describe the feature
This feature would display the total unpacked size for each individual dependency.
While we can expand on specific metrics later, the initial goal is to integrate this data into the dependency table within the sidebar - mirroring the information currently found in the header of each dependency's page.
To improve clarity, we could also move size information to a dedicated section under the header (collapsed secondary header). This could be visualized as a distribution bar.
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.
Additional information
Final checks