Tag Helper para Scripts

Históricamente, los archivos de Scripts (usualmente JavaScript) han sido alojados localmente, junto con el resto de los archivos usados por la aplicación web. Sin embargo, ya a principios de los 2000, el concepto de CDN se torno en una alternativa muy popular para hospedar contenido estático como archivos de script en el mismo servidor del sitio web. CDN son las siglas en inglés de "Content Delivery Network" (Red de Entrega de Contenidos) y mientras que estas redes son usadas para una variedad de propósitos, nuestro centro en éste artículo es la entrega de archivos script.

Si se usa cualquiera de los grandes frameworks de JavaScript, p.ej. jQuery, se debería considerar el usar CDNs para alojar y entregar éstos scripts a la aplicación web. La mayor ventaja, además del hecho de que el servidor ahorrará algunos recursos, es que se usan librerías que son usadas en otras grandes aplicaciones web, al navegador se le permitirá almacenarlas y reusarlas cada vez que visiten tu sitio web - esto hará parecer a tu sitio web mucho mas rápido, a la vez que se ahorra ancho de banda y recursos. Una muy buena situación para ambos lados!

El único problema de usar CDNs es el hecho de pueda no estar disponible el 100% del tiempo. Esto es realmente un problema si se usa una de las mas grandes CDNs, pero todo se quiebra en algún punto, y cuando lo hace, experimentarás que tu sitio web aún está en línea y aparentemente funcionando, pero algunas características fallaran porque una importante parte de JavaScript no está disponible para el reto de tu código. Por lo tanto deberás siempre tener una reserva local, pero como saber cuando usarla? Aquí es donde entra el juego el "Tag Helper" para Scripts!

El atributo fallback-src

Para usar el "Tag Helper" para Scripts, deberías siempre proveer un valor para el atributo fallback-src, como una alternativa al atributo src regular. Está será la ruta que se usará en caso de que la CDN no este disponible. Debería lucir como esto:

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

En éste caso, jQuery será cargado desde cdnjs (un CDN muy popular), pero si no funciona, una versión alojada en la carpeta de contenidos local será usada. Sin embargo, detectar que el CDN ha fallado para entregar el archivo JavaScript requerido puede ser difícil, pero el "Tag Helper" para Scripts ayudará con esto.

El atributo fallback-test

Entregándole un valor al atributo fallback-test, el "Tag Helper" para Scripts se asegurará de que salga código JavaScript para comprobar que la librería deseada cargó correctamente y si no, el script de reserva será incluido. En el caso de jQuery, puedes tomar ventaja del hecho de que jQuery se adjuntará a si mismo como propiedad en el objeto global window, lo que significa que si jQuery ha sido cargado satisfactoriamente, podrás acceder a window.jQuery. puedes usar esto como una expresión de prueba para el "Tag Helper" para Script como sigue:

<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>

Si miras el código de tu página, verás que una pequeña parte de código JavaScript será añadida automáticamente:

<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>

Esto asegurará que si la version del CDN no se carga satisfactoriamente, la version local será incluida.

Sumario

Incluir largas librerías de JavaScript como jQuery desde un CDN es una excelente forma de ahorrar ancho de banda y recursos en el servidor, permitiendo a tu sitio web ejecutarse mas rápidamente. Sin embargo, siempre deberás entregar una reserva local, en caso de que el CDN falle - gracias al "Tag Helper" para Script esto es muy fácil, como se ha visto en este artículo.