Frontend Performance/Shipping Less JavaScript
Lesson 18 of 20 · Episode 18

BundlePhobia

Weigh a dependency before you install it — size, download time, and picking the lighter alternative.

DependenciesBundle sizeAlternatives
Watch on YouTube ↗

Every tool so far fixes problems after they ship. BundlePhobia stops them before they start: paste a package name and see exactly what it'll cost your bundle — its size, its download time on a real network, whether it tree-shakes, and what lighter alternatives exist. The cheapest performance fix is the dependency you never install.

Shift left

Weigh it before you install

Once a dependency is woven into a shipped feature — used by other devs, baked into tests — ripping it out is technical debt that's hard to pay down. The time to ask “is this package worth its weight?” is before npm install, not after users complain the app is slow. That five-second check is the highest-leverage habit in this whole series.

See it

Look up a package

Pick a package and read its cost — then click a suggested alternative to compare. Notice how a “small” choice like dayjs sits next to a heavyweight like moment or echarts:

InteractiveBundlePhobia — the cost of a dependency
Search a package:
Minified
290 KB
Minified + Gzipped
72.1 KB
Download time
Slow 3G
1.4 s
Emerging 4G
82 ms
heavynot tree-shakable1 dependencyShips all locales; not tree-shakable.
Lighter alternatives — click to compare:
Minified vs gzipped size, real download times, tree-shakability, dependency count, and lighter alternatives. moment is 72 KB gzipped; dayjs does the same job in ~3 KB.
The signals

What to read

Smaller isn't automatically better
An alternative that's 80% smaller might lack a feature you need. The tool gives you the candidate; you still verify it does the job. But often — moment → dayjs, a whole UI kit → one component — it's a free win.
Existing projects

Auditing what you already have

BundlePhobia isn't only for new installs. You can hand it your whole package.json and it ranks every dependency by size, surfacing the heaviest ones first. That's your refactor hit-list: swapping one rarely-used heavyweight for a lighter equivalent is often an easy, low-risk performance win on a legacy app.

Q1Multiple choice
When is the ideal time to check a package on BundlePhobia?
Q2Multiple choice
Which number on BundlePhobia best reflects real-world download cost?
Q3Multiple choice
moment.js is ~72 KB gzipped. A common drop-in replacement at ~3 KB is…
Key takeaways
  • BundlePhobia is a pre-install tool: know a dependency's cost before you commit to it.
  • Read gzipped size + download time, and whether it's tree-shakable.
  • Watch hidden dependencies — a small package pulling in others isn't small.
  • Its alternatives are the payoff: moment → dayjs, heavy chart lib → lighter one.
  • Feed it a whole package.json to find easy wins in an existing app.
← Previous
17. Bundle Analyzer
Next →
20. Compressing JavaScript