The Script Tag Helper

Historically, script files (usually JavaScript) have been hosted locally, along with the rest of the files used by a web application. However, as early as the beginning of 2000, the concept of CDN's became a very popular alternative to hosting static content like script files on the same server as the website. CDN is short for Content Delivery Network and while CDN's are used for a variety of purposes and reasons, our focus in this article is the delivery of script files.

If you use any of the large JavaScript frameworks, e.g. jQuery, you should consider using a CDN for hosting and delivering it to your web application. The biggest advantage, besides the fact that your server will save some resources, is the fact that if you use a library that is also used in other major sites, the browser of the visitor is allowed to cache it and then re-use it when they visit your website - this will make your website seem much faster, while saving bandwidth and resources. A win-win situation!

The (perhaps) only problem with using a CDN is the fact that it might not be available 100% of the time. This is rarely a problem if you use one of the major CDN's, but everything breaks at some point, and when it does, you will experience that your website is online and apparently working, but some of the features are failing because an important piece of JavaScript is no longer available to the rest of your code. Therefore you should always have a local fallback but how do you know when to use it? This is where the Script Tag Helper comes in!

The fallback-src attribute

To use the Script Tag Helper, you should always supply a value for the fallback-src attribute, as an alternative to the regular src attribute. This is the path to the local file you want to use in case the CDN is not working as expected. It could look like this:

<script 
		src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" 
		asp-fallback-src="~/Content/jquery.min.js">
</script>

In this case, jQuery will be loaded from the cdnjs (a very popular CDN) location, but if that doesn't work, a local version will be requested from the local "Content" folder instead. However, detecting that the CDN has failed to deliver the required JavaScript file can be difficult, but the Script Tag Helper can help you with this as well.

The fallback-test attribute

By supplying a value for the fallback-test attribute, the Script Tag Helper will make sure to output JavaScript code to test whether the desired library was loaded correctly and if not, the local fallback script will be included. In the case of jQuery, you can take advantage of the fact that jQuery will attach itself as a property on the global window object, meaning that if jQuery has been successfully loaded, you can access window.jQuery. You can use this as a test expression for the Script Tag Helper like this:

<script 
		src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"
		asp-fallback-src="~/Content/jquery.min.js"
		asp-fallback-test="window.jQuery">
</script>

If you look at the source of your page, you will notice that a small piece of JavaScript code will be appended automatically:

<script src="https://cdnj.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>(window.jQuery||document.write("\u003Cscript src=\u0022/Content/jquery.min.js\u0022\u003E\u003C/script\u003E"));</script>

This will ensure that if the CDN version is not successfully loaded, the local version will be included instead.

Summary

Including large JavaScript libraries like jQuery from a CDN is a great way to save bandwidth and resources on your server, while allowing your website to perform even faster. However, you should always supply a local fallback version, in case the CDN failes - thanks to the Script Tag Helper, this is very easy, as seen in this article.