Frontend dependency trees seem terrifying
I did a little experiment today: I used my IDE’s (WebStorm) built-in “create new project” feature to create a vuejs, angular, and a react starter project. Then I compared the total number of installed dependencies for each project using
npm ls --all | grep -v deduped | grep -v OPTIONAL | wc -l
which should count all installed packages without duplicates. For comparison, I counted the installed packages on one of my python projects that is actually a full-blown production application:
| Framework | Number of direct dependencies | Total number of installed packages |
|---|---|---|
| Angular starter project | 25 | 1345 |
| React starter project | 9 | 1951 |
| Vue starter project | 11 | 1336 |
| Python (Django) production app incl. all development libraries | 82 | 113 |
Wow! These numbers seem excessive to me.
The JS starter project are newly created projects without any business logic whatsoever, while the python application is a real-life application that is used in production and serving paying customers. I thought the 234 python packages are already a lot, but the JS starter make them pale in comparison.
What I do like about npm is that it has a built-in mechanism to check for security vulnerabilities of packages, and that this is run when installing via npm install. It can also be manually invoked using npm audit. (If you are using python, you will need to use a third-party tool for security alerts. The package manager pipenv provides such a feature: pipenv check.)
If you liked this post, please, do share it:
Thanks, for reading (and sharing)! 🥳