npm Package Size Checker

See the minified and gzipped size of any npm package, its download time, dependency count and whether it tree-shakes.

npm Package Size Checker tool

Loading...

Example

Input: Package react-dom, version 18.2.0

Result: 132.9 kB minified, 42.7 kB minified and gzipped. Slow 3G 854 ms, 4G 49 ms. 2 dependencies, not tree-shakeable, side effects possible.

Sizes from a live Bundlephobia response. Download times divide the gzipped size (42,679 bytes) by the assumed speeds of 50 kB/s for slow 3G and 875 kB/s for 4G.

  1. Type the npm package name, such as react-dom or @tanstack/react-query.
  2. Leave the version empty for the latest release, type an exact version or tag, or click Browse versions to pick one from the list.
  3. Click Check package size and wait a few seconds while Bundlephobia measures the package.
  4. Compare the minified and gzipped sizes, the download times and the dependency count.
  5. Check the Tree-shakeable and Side effects flags to see whether importing only part of the package will shrink its cost.

Measuring What an npm Package Costs

Type an npm package name and this tool shows what it adds to a JavaScript bundle. You get its minified size, its size after gzip compression and how long that takes to download. For example, react-dom 18.2.0 is 132.9 kB minified and 42.7 kB minified and gzipped. The sizes come from Bundlephobia, which builds the package with a bundler and measures the output. Details such as license and weekly downloads come from the public npm registry.

The gzipped number matters most, since it is close to what a browser actually downloads. The download times assume slow 3G at 50 kB per second and 4G at 875 kB per second, with no latency or caching. Use them to compare packages, not to predict a real page load.

Two flags help you judge the true cost. Tree-shakeable means the package ships an ES module build, so a bundler can drop the parts you never import. Side effects shows whether package.json declares "sideEffects": false. Without it, bundlers keep more code to be safe. Bundlephobia measures the whole package, so importing one function from a tree-shakeable library usually costs much less.

You can check an exact version or a tag such as next. Browse versions loads the full version list from the registry. For a package as popular as react that list is over 1 MB, so it only loads when you ask. Scoped names such as @tanstack/react-query work too.

Bundlephobia builds a version the first time anyone asks for it, which can take 30 seconds or more. It also limits how many requests one visitor can make. Packages with no runtime code, such as @types packages, cannot be sized. Your browser sends only the package name and version. Before you add a dependency, it is worth running it through the Package Vulnerability Checker as well. To shrink your own scripts, try the JavaScript Minifier.

Sources

Frequently Asked Questions

Minified size is the bundled code with whitespace, comments and long names removed. Gzipped size is that same code after gzip compression, which servers apply before sending files. Browsers download the compressed version, so the gzipped number is the better guide to load time. Minified size still matters because the browser has to parse all of it.
Bundlephobia measures the whole package. If the package is tree-shakeable and you import only a few functions, your bundler can drop the rest, so the real cost is lower. Packages you already use elsewhere, such as a shared dependency, are also counted only once in your app.
Install size is how much space the package takes in node_modules after npm unpacks it, including source files, types, docs and builds you never ship. Bundle size is only the code that ends up in your JavaScript file. A package can be several megabytes on disk yet add a few kilobytes to your bundle.
It cannot size packages that contain no runtime code, such as @types packages, or ones that fail to build in its environment, such as some native Node.js modules. The first request for a new version also has to build it, which can time out. Wait a minute and click Try again.

Related Tools

Package Vulnerability Checker

Check npm, PyPI, Maven, Go and other packages for known vulnerabilities and CVEs, and see which version fixes each.

Developer Tools

JavaScript Minifier

Minify JavaScript by removing whitespace, line breaks, and comments for smaller files, without renaming your code.

Developer Tools

CSS Minifier

Minify CSS by removing whitespace, comments, and redundant code to reduce file size.

Developer Tools

Software End-of-Life Checker

See when Node.js, Python, Ubuntu and 470+ other products reach end of life, with the days left for every version.

DevOps Tools

JSON Formatter and Validator

Format, validate, beautify, and minify JSON data with a collapsible tree view and line-and-column error detection.

Developer Tools