The most newbie-friendly way to add a library to a project is to:
- jsDelivr is a public, open-source CDN (Content Delivery Network) developed by Dmitriy Akulov and Prospect One, focused on performance, reliability, and security.
- It is free to use for everyone, with no bandwidth limits.
- We are focused on production use, which also means we are very serious about security.
- All jsDelivr services support HTTPS.
This works, but it’s a painful process. It easier if you use CDNs like JSDelivr.
What is a CDN
CDN stands for content delivery network. Its main purpose is to let users download files faster. Read this article by Fastly if you’re wondering whether you should use a CDN.
CDNS let users download files faster by placing datacenters all over the world. When the browser sees a CDN link, they’ll serve up the library from the datacenter closest to the user. This is how CDNs work.
What is JSDelivr
JSDelivr lets you specify the version of a library you want to download. If you want to specify a version, you add the version number after an
@, like this:
How I use JSDelivr
I use JSDelivr more like a package manager since JSDelivr lets you specify the version of a library. I can upgrade or downgrade the library by changing a number. There’s no need to copy-paste the original source into my project.
However, I rarely use JSDelivr nowadays because I already have a build process that uses Webpack. Webpack lets you
I only use JSDelivr for projects that:
- All jsDelivr related accounts are protected by strong passwords, 2FA, and IP whitelists where possible.
- Our critical code has been thoroughly reviewed both by us and several other independent experts.
- We also have protections in place to prevent people from using jsDelivr to serve malicious files, but if you find something that doesn't look right, report it at our issue tracker.
How to use JSDelivr
We’ve talked about what is JSDelivr, why use it, and when to use it. Let’s dive into the details of using it now.
For the rest of the article, we’ll use a library called zl-fetch as an example.
Installing a library
To install a library, you need to add a
tag that points to the library on JSDelivr. You can load the library from npm or Github, depending on your preferences.
I tend to load libraries from npm.
You need to change
package-name to the name of the library you’re installing. In this case, it’s
If you’re unsure of the name of the library, you can search on npm, or directly on JSDelivr.
Specifying a version
By default, JSDelivr downloads the latest version of a library.
I don’t recommend you use the latest version because authors may update their library. If they update their library, your code may break.
You always want to specify a version number. You can add a version number by add
@, followed by the version number after the package name, like this:
Version numbers follow a Semver format. You can tell what versions are available by checking the available tags on Github.
In our case, the current version of
Loading a specific file
JSDelivr relies on authors to specify a default file for the above format to work. If the default file is not specified, you need to point to the correct file.
There are two ways to know what files are available.
First, you can search for the package on JSDelivr. You’ll see a list of files and folders you can point to:
Second, if you know about npm, you can use npm to install the package somewhere on your computer. Then use your Finder (or Explorer) to browse through the files.
In this case, let’s say the default file is not specified, and we want the
dist/index.js file. Here’s what you’ll write:
Loading a minified version
Minified files are usually smaller in size. Users will be able to download the minified files faster than an unminified file.
JSDelivr minifies files automatically if you use the
I hope this article gives you a good overview of what JSDelivr can do.
If you enjoyed this article, please support me by sharing this article Twitter or buying me a coffee 😉. If you spot a typo, I’d appreciate if you can correct it on GitHub. Thank you!