Packages Management in Pull Requests — The right steps when adding a package

We all like adding the cool/latest NPM packages, but do you ever really research about it when you add one? This short post will tackle the most important steps you should drill down into when adding/removing a package. It’s mostly about the actual need and the future of it while considering other solutions.
💬 If you have more questions feel free to contact/comment.
Overview
You are about to:
- Add a package
- Replace package X with package Y
- Delete a package
- Update/Adjust a package version
Before doing so, you should cover a case with the following:
1. Package Details:
- What is the exact package/s? Search via: https://www.npmjs.com/
- Is it an official package?
- Version
2. Motivation:
- Is it a production or development dependency? (
dependencies/devDependencies) - Is usage limited for specific route/page/flow/.. ? or it can be used all over?
- Why are you adding/replacing/deleting this package? Provide a reason such as:
- It is a tool that makes it easy to..
manipulate arrays
render head tags.. - It is redundant since..
it is not used
it’s functionality can be achieved natively with X.. - It is about to be deprecated..
and the (official) replacement package is.. - Updating it to version X allows..
is more performant
to handle something better ..
3. Impact:
The type of package must be classified by its dependence, purpose or use according to impact on the project.
Concrete examples per type:
- [Core]:
react-redux,axios,react-router-dom - [Tool]:
react-helmet,node-sass - [Development]:
eslint,prettier - [3rd Party]:
rollbar,contentful
4. Size:
We would like to cover the performance impact of having this package in our bundle.
Find the size cost of using it with: https://bundlephobia.com/
- Note: It is important to look at the size in Minified + Gzipped mode.
5. Trends:
A package is all about trend, popularity (stars 🌟+ forks 🍽), maintenance 🛠, issues ⚠️ and downloads.
Compare package above metrics over time using: https://www.npmtrends.com/
Make sure you add at least 3 packages to compare with, you can use the auto related packages links at the bottom.
6. Add Package Report in your PR
In your PR, add the following report (this is just an example of react package):

File-> Load table -> Choose file..) — Make sure you add all the links to the NPM package, bundlephobia and npmtrends too.If you liked the article, please click the 👏💚 below so other people will see it on Medium!
