• Stars
    star
    2,115
  • Rank 21,803 (Top 0.5 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 6 years ago
  • Updated 3 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

⚖️ Find the cost of adding a new dependency to your project

Package Phobia

tests uptime style: prettier

  • ⚖️ 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!

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.
  • 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.

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

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

Author

Developed by styfle

More Repositories

1

awesome-online-ide

🌩️ A list of awesome online development environments
2,919
star
2

cancel-workflow-action

⏹️ GitHub Action to cancel previous running workflows on push
TypeScript
863
star
3

awesome-desktop-js

🖥️ A list of awesome packages and frameworks for implementing javascript applications on the desktop
740
star
4

breaking-changes-web

💢 A list of breaking changes to the web platform
351
star
5

react-server-example-tsx

⚛️ Boilerplate for isomorphic web app with React server-side rendering in TypeScript
TypeScript
277
star
6

copee

📄 Copy text from browser to clipboard...natively! < 1kB
TypeScript
138
star
7

links-awakening

🔗 Recursively check a website for broken links
TypeScript
130
star
8

magnemite

⏺️ Capture repro steps with this screen recorder for websites, powered by Electron
TypeScript
57
star
9

screenshot-v2

New here and want something similar? See https://github.com/vercel/og-image. Historian and want to see the original PR? See https://github.com/zeit/now-examples/pull/207
JavaScript
30
star
10

styfle.dev

👨‍💻 The source code for my website, built with Next.js and hosted on Vercel
TypeScript
23
star
11

geoslack

📍 Geolocate your team in Slack
TypeScript
18
star
12

doorbell

🛎️ Virtual doorbell to notify Amazon Alexa devices
HTML
15
star
13

tls-check

✅ Check the TLS protocol support of one or more web servers
JavaScript
13
star
14

typed-tmpl

🛡A typed, template module using ES6 Tagged Template Strings with TypeScript
JavaScript
6
star
15

The-Harvest-Club

🍊A student-designed Contact Management System for connecting volunteers and growers
PHP
6
star
16

exeggcute

🥚 A node.js module to make executing shell cmds a breeze!
JavaScript
5
star
17

rediscovering-neverland

🧚‍♂️Slides from my Tech Talk given on January 23, 2020
HTML
5
star
18

Basic-Wars

🎖️A turn-based strategy game written in pure Java
Java
4
star
19

dotfiles

⚫ My .bashrc .vimrc etc
Vim Script
3
star
20

tsc-example

Different ways to compile typescript
JavaScript
3
star
21

ncc-bug-socketio

A bug with ncc
JavaScript
2
star
22

ncc-bug-stack

JavaScript
2
star
23

device-width-detection

📱Generate dynamic SVG based on device srcset
JavaScript
2
star
24

ncc-bug-sourcemap

A bug with ncc
TypeScript
2
star
25

dotnet-api-example

Example of what a simple .NET API might look like
C#
1
star
26

ncc-bug-fluent-ffmpeg

JavaScript
1
star
27

micro-ts-example

Example of using micro with TypeScript
JavaScript
1
star
28

ncc-bug-npm

A bug when npm is a dependency
JavaScript
1
star
29

alexa-wunderground

🗣️ WIP - An Amazon Alexa skill for Weather Underground
JavaScript
1
star
30

xtend-es6

extend like a modern boss with Object.assign()
JavaScript
1
star
31

aws-xray-bug

aws xray issue #60
JavaScript
1
star
32

mma-api

👊 api for mma dataset
JavaScript
1
star
33

node-docker-echo

Example node.js echo environment variables in docker
JavaScript
1
star
34

node-http-log

❓ log http request header & body to a file
JavaScript
1
star
35

bug-term-size-tput

Bug in `term-size`
JavaScript
1
star