How do I view the size of npm packages?

问题:

When I search for packages on NPM, I would like to see package sizes (in KB or MB, etc). NPM doesn’t seem to show this information.

How can I determine how much bloat an NPM package will add to my project?

回答1:

What you probably want to measure is the impact a package has if you were to add it to your app bundle. Most of the other answers will estimate the size of the source files only, which maybe inaccurate due to inline comments, long var names etc.

There is a small utility I made that'll tell you the min + gzipped size of the package after it gets into you bundle -

https://bundlephobia.com

回答2:

Take a look at this cost-of-modules project. It's an npm package that will list the size of a package and number of children.

Installation: npm install -g cost-of-modules

Usage: Run cost-of-modules in the directory you are working in.

回答3:

I've created a tool, npm download size, which inspects tarball size for a given npm package, including all tarballs in the dependency tree.

In image above, Tarball size is tar.gz of package, and Total size is size of all tarballs. The tool is pretty basic, but it does what it says.

A cli tool is also available. You can install it like this:

npm i -g download-size

And use it like this:

$ download-size request
request@2.83.0: 1.08 MiB

Here is a asciinema demo.

The source code is available on Github: api, cli tool and web client.

回答4:

In case you are using webpack as your module bundler have a look at:

• webpack-bundle-analyzer
• webpack-bundle-size-analyzer

I definitely recommend the first option. It shows size in interactive treemap. This helps you to find the size of package in your bundled file.

The other answers in this post show you size of the project, but you might not be using all parts of the project, for example with tree shaking. Other approaches then might not show you accurate size.

回答5:

I created Package Phobia early this year with the hope to get the package size information into npmjs.com and also track package bloat over time.

https://packagephobia.now.sh

This is designed to measure disk space after you run npm install for server-side dependencies like express or dev dependencies like jest.

You can read more about this tool and other similar tools in the readme here: https://github.com/styfle/packagephobia

---

Note: Although there is no movement from the npm team to change the website, they are looking at adding the installed size to the cli. See RFC 1 for more info.

回答6:

Try to use package-size.

yarn global add package-size

https://github.com/egoist/package-size

回答7:

You could check out npm-module-stats. It is an npm module that gets the size of an npm module and its dependencies without installing or downloading the module.

Usage:

var stats = require("npm-module-stats");

stats.getStats("glob").then((stack) => {

  let dependencies = Object.keys(stack);
  let totalSize = dependencies.reduce((result, key, index) => {
    return result + stack[key].size;
  }, 0);

  console.log('Total Size in Bytes ', totalSize);
  console.log('Total Dependencies ', dependencies.length-1);

}).catch((err) => {
  console.error(err);
});

It might seem a little verbose but it solves the problem you described appropriately.

回答8:

A "quick & dirty" way is to use curl and wzrd.in to quickly download the minified package and then grep the file size:

curl -i https://wzrd.in/standalone/axios@latest | grep Content-Length

The download is minified but not gzipped, but you get a good idea of the relative size of packages when you compare two or more of them.

回答9:

If you use Visual Studio Code, you could use an extension called Import Cost.

This extension will display inline in the editor the size of the imported package. The extension utilizes webpack with babili-webpack-plugin in order to detect the imported size.