The Script Tag Helper

Trước đây, tệp script (thường là JavaScript) được host cục bộ, với các tệp còn lại của ứng dụng web. Tuy nhiên, đầu những năm 2000, khái niệm CDN trở nên rất phổ biến là cách host các script trên cùng server như website. CDN là từ viết tắt của Content Delivery network và trong khi CDN dùng cho nhiều mục đích, thì chương này chúng ta tập trung vào cách dùng tệp script.

Nếu bạn dùng framework JavaScript như jQuery, bạn nên xem xét dùng CDN cho việc hosting và sử dụng trong ứng dụng web. Ưu điểm lớn nhất bên cạnh việc server sẽ tiết kiệm được tài nguyên là nếu bạn dùng thư viện mà nó cũng được dùng trong site khác thì trình duyệt cho phép lưu vào trong cache để dùng lại khi họ truy cập vào trang web của bạn - nó cho phép website của bạn nhanh hơn, tiết kiệm băng thông và tài nguyên. Đôi bên cùng có lợi!

Có lẽ, vấn đề duy nhất khi dùng CDN là nó có thể không hoàn toàn 100% thuận lợi. Vấn đề này hiếm nếu bạn dùng chỉ một CDN nhưng có thể xảy ra, khi đó bạn sẽ thấy trang web có thể hoạt động nhưng một số đặc điểm có thể có lỗi vì phần nào đó của JavaScript không dùng được. Do đó bạn nên có dự phòng nhưng làm cách nào để thực hiện? Đây là việc của Script Tag Helper!

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.