Package Phobia

• ⚖️ Find the cost of adding a new dependency to your project
• 🕗 Save yourself time and disk space with this web app
• 📈 Detect javascript bloat over time with a chart
• 🛡️ Get a badge/shield for your README
• 📡 Fetch size from json API to integrate into any tool

...as seen on AWS Developer Tools Blog and npm weekly and ponyfoo weekly and habr and rwpod and wolf report and the changelog and all over twitter

What is the purpose?

Package Phobia reports the size of an npm package before you install it.

This is useful for inspecting potential dependencies or devDependencies without using up precious disk space or waiting minutes for npm install. Ain't nobody got time for dat.

Results are saved so the first person might wait a bit to view package size, but everyone else gets to see the results instantly!

Demo

A good use case might be comparing test runners, web frameworks, or even bundlers. Click one of the links below to see Package Phobia in action!

• Test Harnesses: tap vs tape
• Web Frameworks: express vs micro
• JavaScript Bundlers: webpack vs rollup
• Task Runners: grunt vs gulp
• HTTP Requests: request vs node-fetch
• Glob Patterns: glob vs tiny-glob
• Arguments: yargs vs arg
• Site Generators: gatsby vs next
• Type Checkers: typescript vs flow-bin
• Linters: eslint vs jslint
• Color Formatters: chalk vs picocolors
• Command Line Interfaces: @angular/cli vs @babel/cli
• Desktop Frameworks: nw vs electron
• Headless Browsers: puppeteer vs chrome-aws-lambda
• Package Managers: npm vs yarn

API

If you would like to use the Package Phobia API in your project, please create a PR modifying API Users.

See API.md for more usage details.

Prior Art

Package Phobia is inspired by Bundle Phobia and Cost Of Modules.

How is this different?

• Package Phobia THIS TOOL web app that reports the install size of a package over time.
• Bundle Phobia web app that reports the size after webpack bundles the package over time.
• Bundle.js web app that reports the size after esbuild bundles the custom code snippet.
• Pkg-Size web app that reports the size after esbuild bundles one or more packages.
• Cost Of Modules cli that reports the size of your currently installed packages.
• Badge Size badge service that reports the gzip size of a single file from a package as svg.
• Size Limit cli that fails if the bundled (or non-bundled) size of your app is too large.
• Bundle Size cli that fails CI if a file's size is too large.
• Package Size cli that compares the bundle size of multiple packages.
• npm Size cli that compares the npm install size of multiple packages.
• Require So Slow cli that traces the time of each require module in a node.js app.
• Why Bundled? cli that uses webpack stats to show your number of imports and package size.
• Do you even lift? - cli that reports size after rollup bundles the package via npm team.
• Import Cost extension (and cli) that displays package size inline in the editor.
• npm Download Size web app that reports the download size (network traffic) of a package.
• npm Download Size cli cli that reports the download size (network traffic) of a package.
• Build Size - GitHub App that comments on a PR with the size of your build artifacts
• Pkg Size - web app that displays package size and file count over time (static data only)
• BundleWatch - cli that checks if your bundle exceeds a specific size and also tracks increase
• PackWatch - cli that checks if your package tarball exceeds a specific size and also tracks increase

Why is the size different than size on disk?

Did you install a package and compare the size on disk with the size reported on Package Phobia?

This number will likely be different because Package Phobia doesn't know anything about your hard drive so it can't predict how blocks are allocated.

Packages are known to contain many small .js files which can actually use up a lot of disk space, more than if there was one large, contiguous file.

See this question for more details.

What are the long term goals?

Ideally, this information could be listed on npmjs.com, npms.io, or bundlephobia.com.

Below are the relevant feature requests for each website.

• GitHub issue for bundlephobia.com
• GitHub issue for npmjs.com
• GitHub issue for npms.io
• GitHub issue for staticgen.com
• GitHub issue for cost-of-modules
• GitHub issue for npm-cli
• GitHub issue for bundlesize
• GitHub issue for npmgraph.an

Hopefully, this would lead to publishers taking notice of their bloated packages such as the following:

• micro is not micro
• ava is not minimal
• typescript has doubled in size since v2.0.0
• bundlesize is 10x larger after npm install since v0.14.0
• jquery@3.3.0 accidentally adds 300 dependencies
• socket.io is 6x smaller
• serve@7.0.0 is 3x smaller
• webpack-cli@3.0.0 is 4x smaller
• v8n@1.1.1 is 11x smaller
• now@13.0.0-canary.6 is 2x smaller
• typescript@5.0.0-beta is 41% smaller

npm dependencies in the media

I'm not the first one to notice npm packages are snowballing into bloated dependencies of dependencies.

Below are some other users who comically point out this JS bloat.

| thomasfuchs | ben_a_adams | devrant | turnoff.us | styfle | davej | FredyC | tomitrescak | maybekatz | hichaelmart | brad_frost | Bryan_Chapel | getabitlit | iamdevloper | rickhanlonii |

Contributing

See CONTRIBUTING.md and CODE_OF_CONDUCT.md before you start writing any code

Sponsors

• Web hosting sponsored by vercel.com
• Database sponsored by upstash.com

Author

Developed by styfle