Web dependencies or libraries such as jQuery, Vue, bootstrap, underscore, Dojo, font-awesome, and others have become pretty much a part of the modern web. To make loading of these many assets, libraries, and dependencies easier and faster on the client’s browsers, most developers turn to services such as CDNJS and others.
For most developers who have been in the trade for at least a decade, Google has always been the only, and probably, most preferred CDN provider to make loading JS on the web easier and faster. There is also the advantage of the whole thing being free and quite reliable, to be honest. However, as many devs would agree, Google doesn’t really consider its CDN service a priority and can sometimes drag its feet when it comes to updates and upgrades.
Google has, for the longest time, been the most popular CDN service used by developers to speed up the loading of frontend libraries such as JQUERY. However, for an equally long period, Google has always focused their CDN service to popularly used libraries as well as dedicating less time and resources to the service.
What sets CDNJS apart from other services is the number of JS libraries hosted on their servers and served to millions of websites around the world. On top of that, CDNJS is a free and open-source service whose source code is free to other developers.
In addition to popular JS libraries on CDNJS such as cdnjs bootstrap, cdnjs jQuery and cdnjs font awesome, the service also avails a host of other libraries such as:
Over 3,900 JS libraries are currently hosted on CDNJS servers according to data provided by CDNJS themselves. At the same time, the small project has grown in terms of support and community. By the time of publishing this guide, CDNJS had over eight hundred active contributors in its community. The service has amassed a five million-strong user base since its inception, which is roughly 9.2% of the websites on the world wide web today.
As a recap of what CDNJS means, here are some of the things that CDNJS is all about:
Most developers familiar with content delivery networks might already have an idea of how CDNJS might work. The only difference between CDNJS and other JS library CDNs is the fact that it’s open-source, available in most countries, and has more libraries than any other JS library out there.
In a nutshell, CDNJS is a free distributed JS library delivery service that you can use to host your JS dependencies/libraries outside of your server. Using its robust cloud network delivery and storage service, CDNJS will deliver all JS libraries you use on your websites or web applications to your users.
At the time of writing this guide, CDNJS servers and delivery networks were hosted in collaboration with Cloudflare- one of the most popular general-purpose content delivery and DDOS protection networks out there.
You can reference the cdnjs jQuery library with a single line of code so long you know the URL and version you are after. Head over to the CDNJS library website to find the correct URL for the jQuery version you are using on your project. Here is a code example of how you could reference CDJSs hosted jQuery 3.5.1:
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js” integrity=”sha512-WNLxfP/8cVYL9sj8Jnp6et0BkubLP31jhTG9vhL/F5uEZmg5wEzKoXp1kJslzPQWwPT1eyMiSxlKCgzHLOTOTQ==” crossorigin=”anonymous”></script>
Note: there are several versions and packages of the jQuery library on CDNJS. Be sure to visit the library to find the correct one for your project. CDNJS also makes it super-easy to generate the script automatically, including the authentication keys, as shown in the script snippet above.
You can also point to the CDNJS bootstrap library with a single line of code. This means bootstrap will always be loaded from the nearest CDNJS Cloudflare server whenever a user visits your website or web application/
Here is an example of how you can use CDNJS bootstrap version 4.5.0 on your website:
<script src=”https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.bundle.js” integrity=”sha512-iqhWkvLOXVDz+Lr//ZryEKNvZ5pmgdKEe58Wh/VwfTGwTku0MKbuLhjJ1zUAJu8iSbOqfLcXrrxJ61+27THi2Q==” crossorigin=”anonymous”></script>
The above script should be used in conjunction with the correct CSS bootstrap reference either hosted locally or on another CSS bootstrap CDN.
<script src=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/js/all.min.js” integrity=”sha512-YSdqvJoZr83hj76AIVdOcvLWYMWzy6sJyIMic2aQz5kh2bPTd9dzY3NtdeEAzPp/PhgZqr4aJObB3ym/vsItMg==” crossorigin=”anonymous”></script>
Insert the above script to the end or beginning of your JS file, and font awesome will be loaded from the CDJS Cloudflare servers whenever a user opens your website.
Another feature within CDNJS, cdnjs-cdn-data, allows bower devs to replace their references to ones hosted on CDNJS servers. This has the same benefits as referencing any other JS library hosted on CDNJS.
CDN hosted JS libraries will load faster than those hosted on your web server. This improves your website’s performance and user experience, regardless of their location or browsing device power.
CDNs hosting JS libraries often have a distributed server architecture where JS libraries are retrieved from servers nearest to your users. This makes loading, sometimes heavy JS libraries easier.
Most JS CDN services such as CDNJS are free, thus saving you the money you would have spent paying for extra storage on your web server.
You are guaranteed that the JS library being loaded to your website is secure and has not been replaced or hijacked without your knowledge.
Modern browsers such as Chrome will quickly identify a familiar CDNJS URL and download the library to a user’s cache. This means that the next user that visits your website probably has the library in their browser’s cache. However, the browser will only use the cached library if you used the already familiar CDN address on your website too.