Better know your NPM package bundles
Situation:
You are given a task to complete and you decided to implement an open-source solution. This task could be any level of complexity from a popup modal, image carousel, to application state-management system. After doing some searching you have found several solutions that will work to complete your task.
Unfortunately, not all packages you install will be the same. In fact the bundle you download could add extra bloat and effect performance. That is why it is best to always vet the package bundles to understand what you are adding to your application.
Please note this article is purposeful in omitting tools like webpack-bundle-analyzer, source-map-explorer, package-size, cost-of-modules, VSCode “Import Cost” extension, and many others. The reason being is this article is only discussing tools to vet individual packages prior to installation.
Simple vetting:
At this point everyone involved is satisfied with the demos and documentation of your possible solutions. So what’s your next step? A lot of folks may have a process in ranking all of these packages quickly. But let us say you do not have a process and want to see an example. In my experience a popular approach is to look at the following:
- GitHub Stars ⭐️
- NPM Weekly Downloads 📈
- Time since last update 🕓
- Is there a large amount of stale or no activity on GitHub Issues ⚠️
This can be as subjective as you want. But typically this will help weight each similar package and what potentially has the larger and more active community. Time is often not a luxury so if a package has a large active community, in my experience, I have gotten reasonable support or my question has already been answered within GitHub Issues by another developer encountering the same problem.
Beyond simple vetting:
So the root of this article is to provide some tools to help measure dependencies against each other with hard metrics. Each dependency will effect your project in some capacity. As mentioned previously we want to know exactly what is coming bundled with our package to avoid any possible negative impact.
One solution may be entirely self contained code, with a large active community. Another solution may have just as large of a community equally as active but the package comes bundled with a myriad of other dependencies. Our goal is to turn over every rock quickly before making a final decision and doing the install.
Bundlephobia: 👻
“BundlePhobia helps you find the performance impact of npm packages. Find the size of any javascript package and its effect on your frontend bundle.”
This is a wonderfully quick and simple tool. It provides high level highlights like if the package is tree-shakeable or if it is side-effect free. There is a graph highlighting the package size over several recent releases. The Composition tool helps break down the overall percentage of the package by size of other dependencies. Meaning you will get a visualization of how much of the bundle is self contained or how much of the bundle is made up of other dependencies.
Key features:
- Informative highlights
- Quick links to package NPM & GitHub pages
- Version history package size
- Bundle size (Minified and Gzipped)
- Download times
- Composition
- Exported method analysis
- Similar packages
This tool strikes a solid balance between having enough useful information to make an informed decision but not getting overwhelmed.
PackagePhobia: 📦
“Find the cost of adding a npm dependency to your Node.js project. Compare package install size and publish size over time.”
PackagePhobia is the most simple tool in this article. It provides a publish and install size graph based on version history package size. One nice feature about this tool is the direct links out to different tools like Libraries.io and a NPM package visualizer for your selected package.
Key features:
- Publish & Install size
- Version history package size graph
- Quick links to UNPKG, JS Delivr CDN network, Libraries.io, “Visualization of npm dependencies”
openbase: 🤯
“Compare millions of open-source packages with reviews, insights & categories”
This is by far the most feature rich tool. This application provides an excellent exploration experience to find packages along with verbose information about selected packages. Beyond that there is an entire community providing real tangible reviews from their own personal experiences with key feedback topics like ease of use and performance.
Key features:
- Bundle size (powered by Bundlephobia)
- User ratings, feedback, and reviews
- Tutorials
- Popularity
- Weekly downloads
- GitHub Stars
- Documentation
- Alternative packages
- Version history log
- Categorized package explorer
Conclusion:
It is very important for you to understand what it is you are installing from development to production. In my opinion the best decision you can make is an informed one, whether that is gathered from a very simple tool that provides exactly what you need or the tool that will give you all the information you could ever desire.
Hopefully this has given you some viable insight to vetting your NPM packages and new tools for your development toolbox 🧰
