Repository files navigation

This repository serves as a place to file bug reports and feature requests forpkg-size.dev.

Currently, the project is in early stages of development and closed-source. But it may be open-sourced here in the future.

The goal ofpkg-size.dev is to make it easier for curious developers like you to explore the npm ecosystem. It allows you to browse projects in your dependency tree, discover new packages, and learn about their creators. Ultimately, it aims to foster a greater appreciation for the npm ecosystem.

• Uncover hidden dependencies and understand why they're installed.
• Maintain control over yournode_modules by being mindful of what you're installing and its impact on size.
• Optimize web app performance by choosing smaller and optimized ESM packages.
• Compare and evaluate similar packages to identify the best fit for your specific needs.
• Discover the authors, developlment, and funding behind packages.

• Evaluate installation bottlenecks to improve speed. Particularly important for CLI tools loaded with npx.
• Ensure seamless downloads even in unideal conditions such as slow internet or low storage.
• Minimize dependencies to reduce risks like breaking changes or malicious code.

Because they take up a lot of space on your disk. Even small packages can add up quickly. Trycalculating the total size of all thenode_modules on your disk.

When analyzing them, you may find some packages include unnecessary code and impact your app's performance.

Protip: If you're interested in minimizing how much spacenode_modules consumes, check outpnpm. Not only do you regain a ton of disk space, it's also a huge DX improvement!

This project draws inspiration from two amazing services:Package Phobia andBundlephobia.

pkg-size aims to improve upon these services in the following ways:

1. Consolidation:pkg-size combines insights from both services on one platform for a more cohesive analysis.

2. Dependency insights:pkg-size shows what was installed and why, providing valuable information for understanding the result, and helps with identifying large or duplicate dependencies. It also helps devs discover new packages.

3. Latest data:pkg-size does a freshnpm install each time, fetching the latest data and even reflecting updates in nested dependencies. In contrast,Package Phobia andBundlephobia cache their results. For example, when calculating the installation size ofexpress, if a nested dependency had a minor release that increased its size by 100MB, neither service would reflect the change in size because there's no version bump inexpress.

4. Peer Dependencies:pkg-size allows for the inclusion of peer dependencies in the size calculation, recognizing that they're essential for running packages.

This website operates entirely in your browser, from installing npm packages to bundling them!

At its core, the tool is built onWebContainers—a technology byStackBlitz that allows Node.js to run in-browser—, to run npm and install packages directly in your browser. It then analyzes thenode_modules directory to gain insights into the installed packages and their stats.esbuild WASM is used to bundle the package.

The website is static (doesn't require a backend) and hosted on Vercel.

In most cases, no.

In simple cases where each export is independent, you can easily see the cost of importing each one. For example:

exportconstA=()=><10kbstring>;exportconstB=()=><20kbstring>;exportconstC=()=><30kbstring>;

However, in real-life examples, it's not always straightforward.For instance, in this slightly complex example:

constdata=[<10kbstring>,<20kbstring>,];exportconstA=()=>data[0];exportconstB=()=>data[1];exportconstC=()=><30kbstring>;

BothA andB depend ondata, so either importingA orB alone will pull in the 30kbdata. To tree shake it, you need to remove bothA andB. That's to say, neitherA orB have individual import costs.

Determining whether an export has a clear import cost becomes more complex as the number of exports and code size increases.