Choose Your JavaScript Package Manager!
Hello Everyone,
In this article, I’ll talk about the pros and cons of Javascript Package Managers. I’ll share my research with you and leave the decision to you. Before the details, the first question is “What is the Javascript Package Manager?”
This is a tool for the development process. I’ll refer to Javascript Package Manager as a JPM next sentences of this article. JPM provide easy management of dependencies and libraries. You can install supported libraries with the use of JPM. The JPM version is very important for the libraries and dependencies installation process. Generally, these tools manage on the terminal.
Let’s examine the first words of the three popular JPMs we see after accessing their websites:
NPM
npm is the world’s largest software registry. Open-source developers from every continent use npm to share and borrow packages, and many organizations use npm to manage private development as well.
npm consists of three distinct components:
- the website
- the Command Line Interface (CLI)
- the registry
Use the website to discover packages, set up profiles, and manage other aspects of your npm experience. For example, you can set up organizations to manage access to public or private packages.
The CLI runs from a terminal, and is how most developers interact with npm.
The registry is a large public database of JavaScript software and the meta-information surrounding it.
PNPM
When using npm or Yarn, if you have 100 projects using a dependency, you will have 100 copies of that dependency saved on disk. With pnpm, the dependency will be stored in a content-addressable store, so:
If you depend on different versions of the dependency, only the files that differ are added to the store. For instance, if it has 100 files, and a new version has a change in only one of those files,
pnpm updatewill only add 1 new file to the store, instead of cloning the entire dependency just for the singular change.All the files are saved in a single place on the disk. When packages are installed, their files are hard-linked from that single place, consuming no additional disk space. This allows you to share dependencies of the same version across projects.
As a result, you save a lot of space on your disk proportional to the number of projects and dependencies, and you have a lot faster installations!
YARN
Safe, stable, reproducible projects.
Yarn is a package manager that doubles down as a project manager. Whether you work on one-shot projects or large monorepos, as a hobbyist or an enterprise user, we’ve got you covered.
pnpm looks very ambitious when we read the introductory texts :)
Although many features of JPMs are the same, there are some distinctive differences between them. We can list some of them as follows:
- While npm downloads packages sequentially, yarn downloads the same packages in different threads simultaneously, thus increasing speed.
- pnpm and yarn use isolated node_modules. For this reason, they are better than npm in performance. What are the isolated node_modules? If you are wondering about the answer, you can read this article.
- pnpm provides performance improvement by package addressing on the local computer and not downloading the same package again, even if it is used more than once.
- yarn caches versions of packages on the local computer. When you need it, it can install without connecting to the remote repository.
- The npm package manager performs a security check on every installation. Yarn constantly checks behind the scenes to make sure you’re downloading rogue scripts and other files that could end up damaging your project. Security is one of the yarn’s core features.
CLI Commands
In addition, you can access the benchmark here.
Mentioning performance and package management, I think it would be useful to share these libraries with you:
- https://www.npmjs.com/package/webpack-bundle-analyzer
- https://www.npmjs.com/package/cra-bundle-analyzer
- https://www.npmjs.com/package/bundle-analyzer
- https://www.npmjs.com/package/depcheck
If the application you are going to code is a web application, you should read this article.
Lastly, you can measure your web application performance through some applications below:
LightHouse, GTMetrix, PageSpeed Insights, WebPageTest, TestMySite
Chrome Developer Tools, Web.dev, Diib.com, Dotcom-tools, Yellowlab
Thanks for your time…
Subscribe to My Articles! 📝
Resources:
