October 2, 2024
Comparing JavaScript Framework Dependencies
An analysis of the count and size of the starter templates of different JavaScript frameworks.
By Ross Robinojavascript / framework / dependencies
I used the recommended setup for each of these frameworks using the create commands or just installing the package. The repository for all of these setups can be found here. There are many intricacies of what is included in each of these templates (see caveats). This exercise is meant to illustrate where a beginner might end up with when starting a project with one of these frameworks, contributions are welcome if you see any errors. All of these frameworks offer great solutions for getting started and offer a wide variety of feature sets that contribute to their package sizes.
Each of these frameworks offer different features, this analysis is superficial and gives a quick look of the number/size of dependencies you are installing when you initialize a new application using one of these frameworks.
These important considerations are ignored.
Number of packages listed when running npm install.
As the number of dependencies your project relies on grows, so does the number of maintainers. This can expose you to risk if there are bad actors contributing to your dependencies. Having more dependencies also creates friction if some of the packages are not maintained as actively as others and security issues are identified.
The size in MB of the node_modules directory according to MacOS finder.
The largest benefit of having a smaller total size of dependencies is how fast they will be installed on your local machine.
A large node_modules directory indicates that it takes more code to develop your application. This does not correlate with how big the final application is that is shipped to users. For example, Astro has 191 MB of dependencies, but ships zero JavaScript to the client by default. Libraries may include different builds like CommonJS and ESM, or include different amounts of TypeScript definition files. This measures just what is included in the directory, not what is actually imported and used in your application.
It’s important to understand what dependencies you are installing to create your applications and weigh the cost with the features they provide. If you need to install a dependency to use in your project, check your node_modules directory first, you may already have it or a close alternative installed that you can use.…