shfshanyue / bundlephobia

🏋️ Find out the cost of adding a new frontend dependency to your project

bundlephobia.com

Know the performance impact of including an npm package in your app's bundle.

Features

• Works with ES6 packages
• Can build css and scss packages as well (beta)
• Reports historical trends
• See package composition

Badges

• badgen.net - example size of react:
• shields.io - example size of react:

Built using bundlephobia

• Size in browser - As seen on package searches at yarnpkg.com
• bundlephobia-cli - A Command Line client for bundlephobia
• importcost - An Atom plugin to display size of imported packages
• JS Bundle Size Cross-Browser Extension - Chrome and Firefox extension automatically adding package size to the github and npm pages.
• npmcharts.com - bundle size stats at top of page
• Rollpkg - A build tool to create packages with Rollup and TypeScript

Support

Liked bundlephobia? Used it's API to build something cool? Let us know!

We could use some 💛 on our opencollective page –

FAQ

1. Why does search for package X throw MissingDependencyError ?

This error is thrown if a package requires a dependency without adding it in its dependencies or peerDependencies list. In the absence of such a definition, we cannot reliably report the size of the package - since we cannot resolve any information about the package.

In such a case, it's best to report an issue with the package author asking the missing package to be added to its package.json

2. I see a BuildError for package X, but I'm not sure why.

You can see a detailed stack trace in your devtools console, and open an issue with the relevant details. Working on a more ideal solution for this.

Contributing

See Contributing