DEV Community

Manuel Steinberg for kreativ-anders

Posted on

How to use CDN links wisely

Consider the scenario of developing a web application where often there are readily available pre-built JavaScript solutions that can be incorporated into your app. Among the options within Node.js, you can employ npm install ... to integrate these solutions into your library stack and simply add a separate line to your package.json file.

Alternatively, a quick approach involves copying the link from a Content Delivery Network (CDN) like unpkg or jsDelivr and adding it to a <script> tag in this manner:

<script type="text/javascript" src="https://unpkg.com/{PROFILE}/{REPOSITORY}@latest/index.js" defer></script>
Enter fullscreen mode Exit fullscreen mode

Placing such a snippet in your HTML's footer tag readies your web app with the new dependency—most of the time.

However, there's a crucial aspect in the URL above. Notice the indicator for the version of the library being added. In this instance, "@latest" is used, enabling the CDN provider to determine and deliver the most recent release whenever the URL is called.

The benefit of using "@latest" is the assurance of consistently accessing the most up-to-date, optimized, and secure version of the library. Yet, a significant drawback surfaces if the supposed "latest and greatest" version happens to be flawed and the bug remains undetected within your testing suite.

Subsequently, a flawed version might be released and deployed to the CDN provider. If you've embedded a CDN link with the "@latest" indicator, your users could inadvertently download the buggy version, potentially causing your web application to crash. While employing a JS error detection library may alert your admins, there's no guarantee.

Hence, it's a prudent recommendation to embed a CDN link with a specific, functional version, as shown in the following example:

<script type="text/javascript" src="https://unpkg.com/{PROFILE}/{REPOSITORY}@{VERSION}/index.js" defer></script>
Enter fullscreen mode Exit fullscreen mode

Although this process demands developer effort to manually update the script link and rigorously test the new version, it ensures that your web application won’t unpredictably fail unnoticed. This significantly reduces the risk of negative user experiences due to app malfunctions.

We learned this the hard way by relying on the latest release. Once, we published a link to one of our web applications that had been thoroughly tested a few days before. Unfortunately, a new faulty release of one of the used JS-libraries was updated soon after the article was published, rendering certain parts of our application unusable. Imagine losing track of the versions used, requiring extensive manual efforts to check each version.

As a helpful tip

Set up notifications to stay informed about new versions of your dependencies and increment the version number. However, avoid using "@latest" at all costs. A good practice is to monitor the specific GitHub repository for updates.

Top comments (0)