A capacidade de adicionar rapidamente dependências a um projeto npm é uma dádiva e uma maldição – a maldição é que, muitas vezes, o usuário não tem controle sobre a disponibilidade dessas dependências (ou seja, a situação do teclado esquerdo) e elas têm o potencial de inchar o aplicativo ou até mesmo aumentar o tempo de download do projeto. A verdade é que devemos ter cuidado com aquilo de que dependemos.


Recentemente, encontrei um utilitário incrível para medir o tempo de download de dependências e dependências para dependências: slow-deps. Comece instalando o slow-deps:


npm install -g slow-deps


Depois de instalado, navegue até o diretório que hospeda o package.json e execute slow-depso resultado será algo parecido com isto:



# 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


O senhor pode ver que há algumas dependências que realmente atrasam o processo de instalação devido à enorme quantidade de suas próprias dependências. Caramba!


Então, o que o senhor pode fazer? O senhor pode procurar pacotes alternativos que executem a mesma função, mas possivelmente com mais dependências. Se o senhor não estiver executando o npm install com frequência (ou seja, não está implementando com frequência), talvez esse tempo de instalação não seja um grande problema; no entanto, se o senhor estiver, é bom conhecer os gargalos!

  • Da webcam ao GIF animado: o segredo por trás do chat.meatspac.es!
  • Uma entrevista com Eric Meyer

    Seus primeiros livros sobre CSS foram fundamentais para impulsionar meu amor pelas tecnologias de front-end. O que havia no CSS que o senhor se apaixonou e o levou a escrever sobre ele?

  • Apresentando o MooTools Templated

    Um grande problema com a criação de componentes de interface do usuário com a estrutura JavaScript do MooTools é que não há uma boa maneira de permitir a personalização do modelo e a facilidade de criação de nós. A partir de hoje, há duas maneiras de criar: new Element Madness A primeira maneira de criar componentes de…

  • Registre seleções de texto usando MooTools ou jQuery AJAX

    Uma técnica que estou vendo cada vez mais atualmente (CNNSI.com, por exemplo) é a gravação AJAX do texto selecionado. Faz sentido: se o senhor detectar usuários selecionando os termos várias vezes, provavelmente poderá presumir que os visitantes estão pesquisando esse termo no Google…