npm Package Size Estimator

Minified + gzipped size is the closest approximation to what your users actually download. Minification removes whitespace, comments, and shortens variable names. Gzip compression further reduces the size by 60-80% on average. Most CDNs and web servers serve gzipped responses automatically. When evaluating package size, always use the min+gz number — the raw minified size is misleading because gzip handles repetition very efficiently.

A common rule of thumb: keep your total JavaScript bundle (excluding React/framework) under 50 KB min+gz for fast loading on mobile. For the full initial load including framework, aim for under 100 KB min+gz. Google's Performance Budget recommends total transfer size under 200 KB on a 3G connection for Time to Interactive under 5 seconds. For critical path JS (blocking render), target under 14 KB — the TCP slow-start window. Libraries like moment (72 KB) or MUI (93 KB) alone can blow your budget.

Sizes in this tool are approximate based on common bundle sizes reported by bundlephobia.com and bundle.js.org. Actual sizes depend on which parts of the package you import (tree-shaking), your bundler configuration, and whether you're using the ESM or CJS build. For exact sizes, use bundlephobia.com or run your actual bundle through webpack-bundle-analyzer or vite-bundle-visualizer.

Tree-shaking is a bundler optimization that removes unused exports from your bundle. If you import `import { format } from 'date-fns'`, only the format function is included — not the entire library. For tree-shaking to work, the package must be written as ES modules (ESM with import/export statements, not CommonJS require). Libraries like date-fns, lodash-es, and @radix-ui/* are fully tree-shakeable. Lodash (non-es) is not tree-shakeable — use `lodash-es` or individual imports like `lodash/debounce`.

moment → dayjs (2.6 KB vs 72 KB). lodash → lodash-es with named imports or radash (4 KB). axios → ky (4 KB) or native fetch. @mui/material → headless UI + Tailwind or shadcn/ui. framer-motion → CSS transitions or motion/react (subset). redux + react-redux → zustand (1.2 KB) or jotai (3.1 KB). yup → zod (12 KB) or valibot (1.2 KB). formik → react-hook-form (8.6 KB). These alternatives often have better TypeScript support too.

For Vite projects: install `rollup-plugin-visualizer` and add it to vite.config.ts. For webpack: use `webpack-bundle-analyzer`. For Next.js: use `@next/bundle-analyzer`. For a quick check without building: use `bundlephobia.com` to check individual packages, or `bundlesize` CLI for CI budget enforcement. The Chrome DevTools Coverage tab shows unused JavaScript on an actual page load. For per-route analysis in Next.js, check the build output — it shows each route's JS size.