Bundlephobia — Find the Cost of Adding a npm Package

Introduction

Bundlephobia helps JavaScript developers understand the real cost of adding a dependency to their project. It shows the minified size, gzipped size, download time, and dependency tree of any npm package, so you can make informed decisions about what to include in your bundle.

What Bundlephobia Does

• Displays minified and gzipped bundle sizes for any npm package
• Shows estimated download times on slow 3G, emerging 4G, and average connections
• Breaks down the dependency tree to show which sub-dependencies add weight
• Compares sizes across versions to track package bloat over time
• Provides a public API for programmatic size lookups

Architecture Overview

Bundlephobia runs a Node.js backend that installs each queried package in an isolated environment, bundles it with webpack, and measures the output size. Results are cached so subsequent lookups for the same package version return instantly. The frontend is a lightweight web app that queries the API and renders size visualizations.

Self-Hosting & Configuration

• Clone the repository: git clone https://github.com/pastelsky/bundlephobia
• Install dependencies: yarn install
• Start the development server: yarn dev
• The app requires Node.js and webpack installed locally for bundling analysis
• Configure caching backends and rate limits via environment variables

Key Features

• Instant size analysis for the entire npm registry
• Historical size tracking across package versions
• Dependency composition breakdown showing which imports add weight
• Export analysis support showing individual named export costs
• Badge generator for embedding size info in README files

Comparison with Similar Tools

• webpack-bundle-analyzer — Analyzes your actual build output; Bundlephobia checks packages before install
• size-limit — CI tool to enforce bundle budgets; Bundlephobia is a lookup service
• Import Cost (VS Code extension) — Shows import size inline in your editor; Bundlephobia is web-based
• packagephobia — Measures install size (disk space); Bundlephobia measures bundle size (what ships to users)

FAQ

Q: Does Bundlephobia account for tree-shaking? A: The default size shown is the entire package. For packages that support ES modules, Bundlephobia also shows the size of individual named exports.

Q: Can I check private packages? A: No. Bundlephobia only works with packages published to the public npm registry. For private packages, use size-limit locally.

Q: How accurate are the size numbers? A: Bundlephobia uses webpack to create a real production bundle, so numbers closely match what you would ship. Minor differences may occur due to your specific webpack or Rollup configuration.

Q: Is there a CLI tool? A: Community tools like bundle-phobia-cli provide command-line access to the Bundlephobia API.

Sources

• GitHub Repository
• Website