slow-deps to Measure NPM Install Time

By  on  

The ability to quickly add dependencies to an npm project is a gift a curse -- the curse being you oftentimes have no control over those dependencies being available (i.e. the left-pad situation) and the have the potential to bloat your application or even increase project download time.  The truth is we should really be careful about what we depend on.

I recently found an awesome utility for measuring dependency download time and dependencies to dependencies:  slow-deps.  Start by installing slow-deps:

npm install -g slow-deps

After installed, navigate to the directory which hosts package.json and run slow-deps; the result will look something like this:

# Test Repo:  aframe

$ slow-deps
Analyzing 45 dependencies...
[====================] 100% 0.0s
---------------------------------------------------------------
| Dependency                    | Time     | Size    | # Deps |
---------------------------------------------------------------
| semistandard                  | 1m 14.4s | 24 MB   | 242    |
| tween.js                      | 1m 10.7s | 22 MB   | 250    |
| budo                          | 1m 1.4s  | 14 MB   | 275    |
| mozilla-download              | 49.3s    | 26 MB   | 194    |
| karma                         | 39.8s    | 16 MB   | 153    |
| snazzy                        | 36.2s    | 9.7 MB  | 146    |
| karma-coverage                | 26.7s    | 8.0 MB  | 99     |
| browserify                    | 23s      | 6.4 MB  | 118    |
| codecov                       | 17.8s    | 3.9 MB  | 73     |
| istanbul                      | 12.1s    | 6.5 MB  | 55     |
| minifyify                     | 11.4s    | 4.8 MB  | 48     |
| browserify-css                | 10.7s    | 4.0 MB  | 29     |
| document-register-element     | 9.7s     | 62 KB   | 0      |
| browserify-derequire          | 9.5s     | 1.7 MB  | 42     |
| mocha                         | 7.2s     | 1.3 MB  | 34     |
| gh-pages                      | 6.2s     | 3.7 MB  | 22     |
| three                         | 5.5s     | 10.0 MB | 0      |
| sinon                         | 5.3s     | 1.0 MB  | 5      |
| karma-browserify              | 5.2s     | 1.0 MB  | 9      |
| webvr-polyfill                | 4.2s     | 898 KB  | 2      |
| karma-mocha-reporter          | 4s       | 104 KB  | 7      |
| uglifyjs                      | 3.9s     | 752 KB  | 6      |
| rimraf                        | 3.6s     | 157 KB  | 11     |
| karma-sinon-chai              | 3.2s     | 146 KB  | 1      |
| replace                       | 3s       | 341 KB  | 7      |
| chai                          | 2.8s     | 438 KB  | 3      |
| karma-mocha                   | 2.8s     | 18 KB   | 0      |
| karma-chrome-launcher         | 2.6s     | 56 KB   | 5      |
| browserify-istanbul           | 2.5s     | 84 KB   | 5      |
| exorcist                      | 2.5s     | 143 KB  | 6      |
| lolex                         | 2.3s     | 122 KB  | 0      |
| karma-env-preprocessor        | 2.2s     | 5.8 KB  | 0      |
| mkdirp                        | 2s       | 47 KB   | 2      |
| chai-shallow-deep-equal       | 2s       | 17 KB   | 0      |
| husky                         | 2s       | 14 KB   | 1      |
| karma-firefox-launcher        | 1.9s     | 13 KB   | 0      |
| deep-assign                   | 1.9s     | 11 KB   | 1      |
| sinon-chai                    | 1.9s     | 18 KB   | 0      |
| debug                         | 1.5s     | 37 KB   | 1      |
| object-assign                 | 1.3s     | 7.4 KB  | 0      |
| open                          | 1.3s     | 26 KB   | 0      |
| karma-chai-shallow-deep-equal | 1.2s     | 6.8 KB  | 0      |
| present                       | 1.1s     | 12 KB   | 0      |
| promise-polyfill              | 1.1s     | 17 KB   | 0      |
| style-attr                    | 1s       | 6.5 KB  | 0      |
---------------------------------------------------------------
Total time (non-deduped): 9m 2s
Total size (non-deduped): 167 MB

You can see that there are a few dependencies which really slow down the install process due to a massive amount of its own dependencies.  Yikes!

So what can you do?  You can look for alternative packages which perform the same function but possible more dependencies.  If you aren't running npm install often (i.e. not deploying often), maybe this install time isn't a big deal; if you are, however, it's good to know the bottlenecks!

Recent Features

  • By
    From Webcam to Animated GIF: the Secret Behind chat.meatspac.es!

    My team mate Edna Piranha is not only an awesome hacker; she's also a fantastic philosopher! Communication and online interactions is a subject that has kept her mind busy for a long time, and it has also resulted in a bunch of interesting experimental projects...

  • By
    I’m an Impostor

    This is the hardest thing I've ever had to write, much less admit to myself.  I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life.  All of those feelings were very...

Incredible Demos

  • By
    CSS Transforms

    CSS has become more and more powerful over the past few years and CSS transforms are a prime example. CSS transforms allow for sophisticated, powerful transformations of HTML elements.  One or more transformations can be applied to a given element and transforms can even be animated...

  • By
    Create a Dynamic Table of Contents Using MooTools 1.2

    You've probably noticed that I shy away from writing really long articles. Here are a few reasons why: Most site visitors are coming from Google and just want a straight to the point, bail-me-out ASAP answer to a question. I've noticed that I have a hard time...

Discussion

  1. It’s important to note that slow-deps calculates times without considering npm’s local cache.
    In normal use npm packages are stored in your local .npm cache to avoid repeat downloads.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!