A npm package size comparison showing min+gzip bundle sizes for 50+ common packages. Compare heavyweight vs lightweight alternatives to make informed choices about your JavaScript bundle.
How to Choose Lightweight npm Packages
Bundle size directly impacts Time to Interactive (TTI) on mobile — 100KB of JS parses and executes significantly slower than 10KB. Here is how to make size-conscious package choices.
Step 1: Check bundlephobia.com
Before installing a package, check bundlephobia.com for accurate min+gzip size and tree-shaking status. The size shown on npm is the unpacked node_modules size — not the bundle impact. A 500KB package might bundle to only 10KB if it's properly tree-shakeable.
Step 2: Use Tree-Shakeable Alternatives
Prefer lodash-es over lodash for utility functions (import only what you need). Use date-fns over moment.js (modular, each function is separately importable). Use native fetch over axios for simple requests. Use Vite/esbuild over webpack for faster builds.
Step 3: Measure Your Actual Bundle
After adding packages, use webpack-bundle-analyzer or Vite's built-in visualizer to see what's in your bundle. Often you'll find packages you thought were tree-shaken but weren't, or dev dependencies accidentally included in production.
FAQ
Is this npm package size comparison free?
Yes, completely free. All data is available instantly in your browser.
What does min+gzip size mean?
Min+gzip is the size of the minified bundle after gzip compression — the most relevant measure for production web performance because browsers receive gzip-compressed assets. A 70KB minified library often compresses to 20-25KB with gzip. Always check min+gzip, not just minified size.
Why is lodash-es smaller than lodash in modern builds?
lodash-es exports individual functions as ES modules, enabling tree-shaking. If you only import debounce (import debounce from 'lodash-es/debounce'), your bundler includes only the debounce code (~2KB) not all 70KB of lodash. lodash's CommonJS format cannot be tree-shaken — importing anything imports the whole library in older bundler configs.
Why is moment.js considered too large?
moment.js is 72KB min+gzip. Most of this is locale data (40+ languages bundled by default). For basic date formatting, alternatives like day.js (2KB), date-fns (tree-shakeable), or Luxon are dramatically smaller. Unless you need moment's specific API, switching to day.js typically saves 65-70KB.
Is axios worth the size vs fetch?
axios is ~14KB min+gzip. The native fetch API is 0KB (built into browsers). For simple requests, fetch with a small wrapper is sufficient. axios adds automatic JSON parsing, request/response interceptors, better error handling, request cancellation, and upload progress events. For complex API clients with interceptors and retry logic, axios saves significant boilerplate.
What is tree-shaking and why does it matter?
Tree-shaking is when a bundler (webpack, rollup, vite) removes unused exports from a package. A tree-shakeable package exports functions individually (ES modules). If you import only isEqual from a tree-shakeable utils package, only that function is bundled. Libraries with side-effectful code or CommonJS format cannot be tree-shaken — you get the whole package regardless.