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
    Regular Expressions for the Rest of Us

    Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

  • By
    CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

Incredible Demos

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!