How do I view the size of npm packages?

Question

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?

Update 2020 (copied from @styfle answer)

The "Unpacked Size" (basically Publish Size) is available on the npmjs.com website along with "Total Files". However, this is not recursive meaning that npm install will likely be much bigger because a single package likely depends on many packages (thus Package Phobia is still relevant).

There is also a pending RFC for a feature which prints this information from the CLI.

some modules depend on other packages and you may be already downloaded them with other module . — mercury, Oct 26 '21 at 02:46

Shubham Kanodia · Accepted Answer · 2019-05-17T03:15:43.637

317

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

edited May 17 '19 at 03:15

answered Apr 02 '17 at 08:18

Shubham Kanodia

6,036
3
32
46

8

Beautiful UI! Thanks this is exactly what I was looking for. Takes forever on super large packages though. – protoEvangelion Jul 20 '17 at 22:34
4

@Black Should be back up – Shubham Kanodia Sep 12 '17 at 08:52
7

This link: [`https://cost-of-modules.herokuapp.com`](https://cost-of-modules.herokuapp.com) now directs to [`https://bundlephobia.com`](https://.bundlephobia.com) A very useful tool btw. – Adam Weber Oct 12 '17 at 20:19
How should the result of bundlephobia be interrupted? For example, for https://bundlephobia.com/result?p=geoip-lite@1.3.6, it is showing a size of 31kb (minified), but according to cost-of-modules (128.09M), and download-size (36MiB). – williamli Mar 07 '19 at 09:06
When I run my bundle through I get an unexpected error too many requests, how do I fix that that? @ShubhamKanodia Thanks! – Shaun Aug 08 '19 at 18:42
2

They have also rolled out a beta version of a `package.json` scanner! – Lucat Feb 19 '20 at 11:31
3

this is very great and accurate! I hope it exists as an extension in VScode, Import Cost is not very accurate sometimes – Zeyad Shaban Dec 06 '20 at 06:05
This is extremely elegant. Exactly what I was looking for--thank you! – Ross Hunter Aug 19 '21 at 04:44
@ZeyadShaban they had made it an extension at your time of writing... looks like it's still flown under the radar. It requires package.json at root of workspace, but it looks like it works. https://marketplace.visualstudio.com/items?itemName=crewsycrews.bundlephobia-support – Reece Daniels Apr 28 '22 at 21:47
1

At first glance, this seems like a useful tool. But it really only shows minified sizes. – Seph Reed May 28 '22 at 17:57

Liron Yahdav · Answer 2 · 2017-01-21T01:37:11.540

96

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.

edited Jan 21 '17 at 01:37

answered Jan 21 '17 at 01:32

Liron Yahdav

10,152
8
68
104

5

A bit overkill, it need to reinstall all your modules before the computation. But does the job. – pdem Nov 03 '17 at 08:14
42

don't use this package - it creates an artifact folder called nodemodules.bak which creates ugly side effects – Nth.gol May 22 '18 at 21:23
2

install or reinstall will always overkill, Am also looking for the options where nothing can be installed back. – Saravanan Rajaraman Aug 18 '20 at 02:42
i would prefer to go with @bkk https://www.npmjs.com/package/npm-module-stats – Saravanan Rajaraman Aug 18 '20 at 02:44
6

what ugly side effects this package create? – Krystian Mateusiak Feb 23 '21 at 19:24
5

Use flag --no-install `npx cost-of-modules --no-install` – david.sansay Jul 15 '22 at 05:52
1

Great, I ran the command and now my project doesn't work – Eliseo Jan 09 '23 at 21:20
@KrystianMateusiak Is also messing around with the loc files. – Erez May 02 '23 at 06:45
I ran this module, it creates 8756 files in my node_modules! This package does it without any warning notification. Destructive and rubbish. – Tom Jun 24 '23 at 00:43

styfle · Answer 3 · 2020-07-15T13:40:34.960

55

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.com

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

Update 2020

The "Unpacked Size" (basically Publish Size) is available on the npmjs.com website along with "Total Files". However, this is not recursive meaning that npm install will likely be much bigger because a single package likely depends on many packages (thus Package Phobia is still relevant).

There is also a pending RFC for a feature which prints this information from the CLI.

edited Jul 15 '20 at 13:40

answered Sep 06 '18 at 15:37

styfle

22,361
27
86
128

2

This is great, but why do its results differ so markedly from bundlephobia? e.g. compare the results for lodash.lowerfirst – Danyal Aytekin Oct 25 '18 at 13:27
7

@DanyalAytekin Because they're measuring different things. Short answer: if you are looking at a front-end package use BundlePhobia. If you are looking at a back-end package use PackagePhobia. There are more details in [the readme](https://github.com/styfle/packagephobia/blob/master/README.md#how-is-this-different) if you are interested. – styfle Oct 25 '18 at 13:52
This is excellent. Can you please do this to calculate the total of the sizes – olawalejuwonm Jan 07 '22 at 07:58

Black · Answer 4 · 2018-06-22T22:19:50.523

34

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

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.

Webpack Bundle Analyzer

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.

edited Jun 22 '18 at 22:19

answered Sep 12 '17 at 08:14

Black

9,541
3
54
54

Marvelous! In general, the first one may be added as a plugin to a Webpack configuration or passed in Laravel Mix. At the plugin Webpack build time (after the bundling/compilation), it starts a web server on `127.0.0.1:8888` with the interactive map. Related: https://github.com/webpack-contrib/webpack-bundle-analyzer#size-definitions – Artfaith Dec 24 '22 at 22:58

arve0 · Answer 5 · 2020-01-28T09:10:01.723

29

I've created a tool, npm download size, which inspects tarball size for a given npm package, including all tarballs in the dependency tree. This gives you an idea of the cost (install time, disk space, runtime resources, security audit, ...) of adding the dependency up front.

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

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

edited Jan 28 '20 at 09:10

answered Oct 14 '17 at 22:10

arve0

3,424
26
33

Doesn't seem to calculate sizes for any dependencies... ie. when I ran it it just listed the package I asked. When I actually installed, more than 1000 packages were installed... taking up more than 10 times the amount of space reported. – dagelf Nov 18 '20 at 10:31
Is it perhaps missing recursive dependencies? – dagelf Nov 18 '20 at 10:37
1

It does resolve packages recursive, but report tar.gz size, not unpacked size. The web-ui also shows number of recursive dependencies. What package did you test on? – arve0 Nov 18 '20 at 11:05
Just the cli. Maybe if it showed a package count... or specified the .tar.gz .... – dagelf Nov 18 '20 at 15:59

c01nd01r · Answer 6 · 2019-09-06T18:42:00.363

16

Try to use package-size.

npx package-size vue,vue-router,vuex react,react-dom,react-router,redux

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

edited Sep 06 '19 at 18:42

answered Jan 25 '18 at 14:44

c01nd01r

598
5
9

score 6 · Answer 7 · answered Jul 01 '21 at 07:13

6

Before publishing the npm package, You can check the size of the package using the following command.

npm publish --dry-run

I have attached the result of my npm package.

answered Jul 01 '21 at 07:13

Rahul Sharma

9,534
1
15
37

1

useful—would also be nice if it could sort by size – IliasT Jan 31 '22 at 19:07

score 5 · Answer 8 · answered May 28 '18 at 09:28

5

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.

answered May 28 '18 at 09:28

kyw

6,685
8
47
59

Also available for WebStorm. – JoeTidee Aug 12 '18 at 10:56
This extension doesn't work for all the packages. It shows Calculating... and then suddenly vanishes even after changing the timeout value to a very large number – shreyansh Jan 23 '20 at 13:41

score 5 · Answer 9 · answered Oct 29 '19 at 16:30

5

howfat is one more tool which can show total package size:

npx howfat jasmine

screensot

answered Oct 29 '19 at 16:30

Alexey Prokhorov

3,431
1
22
25

score 3 · Answer 10 · answered Mar 07 '17 at 09:14

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.

What about 2nd level deps? – Sharikov Vladislav Sep 04 '17 at 09:09 — Sharikov Vladislav, Sep 04 '17 at 09:09

score 2 · Answer 11 · answered Apr 13 '17 at 16:39

2

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.

answered Apr 13 '17 at 16:39

thoragio

289
1
10

2

Well, use another service like [unpkg.com](https://unpkg.com) then. Example: `curl -i https://unpkg.com/axios@0.16.1/dist/axios.min.js | grep Content-Length` – thoragio Apr 20 '17 at 08:00

score 2 · Answer 12 · answered Oct 18 '21 at 14:12

I prefer https://github.com/aholachek/bundle-wizard all the way since it was released.

It works on deployed sites: npx bundle-wizard reddit.com
It works on your local project:

For multi-page apps/sites adjust the last line with the path you want to check.
```
npm run build
npx serve -s build
npx bundle-wizard localhost:5000/
```

The interactive view is really helpful in discovering what's where.

score 1 · Answer 13 · answered Mar 15 '21 at 07:33

In order to check the impact of different packages on your bundle. You can check out source-map-explorer.

Install:

npm install -g source-map-explorer

Usage:

source-map-explorer bundle.min.js
source-map-explorer bundle.min.js bundle.min.js.map
source-map-explorer bundle.min.js*
source-map-explorer *.js

This will open up a visualization of how space is used in your minified bundle.

score 0 · Answer 14 · answered Feb 08 '23 at 03:38

I created bundlejs for this exact reason. Bundlejs was designed to be a fast and always accessible online bundler that can treeshake, analyze the bundle, minify, gzip & brotli the bundle, give the compressed size, and also return the fully bundled code, you can check it out at https://bundlejs.com.

The source code is available on GitHub at https://github.com/okikio/bundlejs

However, if you're goal is to just check what the npm install size for packages, I highly recommend https://packagephobia.com. I didn't create packagephobia but it's a high quality tool that covers the other niche when it comes to checking js package sizes

score 0 · Answer 15 · answered Jul 28 '23 at 14:15

0

If you are using vs code then there is simple extension that helps you visualize npm package size, who installed it, when it was installed. You dont need any npm package to install for that.

npm dependency analyser

answered Jul 28 '23 at 14:15

OmkarBhede

31
5

How do I view the size of npm packages?

15 Answers15

Linked