Saltar al contenido

Artículos, tutoriales, trucos, curiosidades, reflexiones y links sobre programación web ASP.NET Core, MVC, Blazor, SignalR, Entity Framework, C#, Azure, Javascript... y lo que venga ;)

17 años online

el blog de José M. Aguilar

Inicio El autor Contactar

Artículos, tutoriales, trucos, curiosidades, reflexiones y links sobre programación web
ASP.NET Core, MVC, Blazor, SignalR, Entity Framework, C#, Azure, Javascript...

¡Microsoft MVP!
miércoles, 3 de abril de 2013
ASP.NETLa nueva versión de System.Web.Optimization traerá (aún está en beta) algunas novedades interesantes al sistema de bundling que se incluye de serie en los proyectos ASP.NET MVC y se distribuye a través de Nuget en el paquete Microsoft.AspNet.Web.Optimization.

En particular, vamos a centrarnos en una característica muy práctica si queremos utilizar una Content Delivery Network (CDN) externa (como la de Microsoft, Google o incluso una propia) para delegar a ella la carga de bibliotecas de script comunes, pero queremos a la vez proporcionar una alternativa local por si acaso ésta fallase debido a cualquier motivo.

1. La situación actual

El sistema de bundling ya nos permitía, al mismo tiempo que definíamos los bundles, especificar la dirección en la CDN a través de la cual el archivo podía ser obtenido. Esto lo hacíamos justo en el momento de la creación del bundle:
bundles.Add(new ScriptBundle(
        "~/bundles/jquery", // Bundle virtual path
        "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js" // CDN Path
    )
    .Include("~/Scripts/jquery-{version}.js"));
Este bundle podemos referenciarlo desde la vista usando la dirección virtual asignada como sigue:
      ...
      @Scripts.Render("~/bundles/jquery")
   </body>
</html>
El código resultante de esta llamada depende del valor establecido en la propiedad booleana BundleTable.Bundles.UseCdn . Si contiene false, el valor por defecto, el tag <script> generado apunta a la dirección del servidor local a través de la cual es posible descargar el archivo comprimido:
<script src="/bundles/jquery?v=UgyEMAYOuSB9Bb6HcOEVHpd6fIIp54yF086SRNVcdIY1"></script>
En cambio, si el valor de BundleTable.Bundles.UseCdn es true, la URL que aparecerá en el tag es la indicada como dirección del archivo en el CDN:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>

2. Las novedades

Lo anterior está bien pero, aunque puede resultar válido en muchos escenarios, hay casos en los que es claramente insuficiente y tenemos que hacer algunos apaños para que todo vaya bien. Sólo tenéis que imaginar que estamos desarrollando una aplicación con esas referencias en un ordenador sin internet…

Pues para evitarnos trabajo, la nueva versión de System.Web.Optimization incluye un mecanismo automático de fallback que nos permite detectar cuándo ha habido problemas descargando nuestra biblioteca desde el CDN, y, en este caso, cargar el bundle local de forma automática.

La forma de conseguirlo es idéntica a la de antes: definimos un bundle de un archivo especificando la dirección de la URL para obtenerlo desde la CDN, e indicamos en él una expresión de fallback, es decir, una expresión que será evaluada en tiempo de script y que debe determinar si la biblioteca ha sido cargada con éxito. Por ejemplo, para saber si jQuery ha sido cargado con éxito sólo hay que observar si hay un objeto en window.jQuery, ¿verdad? Pues esa sería la expresión de fallback.

El siguiente ejemplo muestra cómo deberíamos crear el bundle y añadirlo a la tabla de bundles del sistema especificando la expresión de comprobación:
var jquery = new ScriptBundle(
        "~/bundles/jquery", // Bundle virtual path
        "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js" // CDN Path
    )
    .Include("~/Scripts/jquery-{version}.js");

jquery.CdnFallbackExpression = "window.jQuery";
BundleTable.Bundles.Add(jquery);
Una vez referenciado en la vista, el código de marcado generado será el siguiente:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script>(window.jQuery)||document.write('<script src="/bundles/jquery"><\/script>');</script>
Observad que lo único que se hace es introducir un bloque de script justo después de la referencia al CDN en el que se evalúa la expresión de fallback y, si no se cumple, se genera sobre la página una nueva referencia al bundle local. Si queréis comprobar su funcionamiento, sólo tenéis que introducir una dirección incorrecta en la URL al CDN, y veréis cómo se utiliza el archivo local.

Por último, indicar que podéis probar estas cosas descargando desde Nuget la versión prerelease del paquete. Ah, y recordad que para que el bundling funcione correctamente es necesario desactivar el modo depuración en el web.config, o bien habilitar manualmente este mecanismo introduciendo la siguiente asignación en algún punto de la inicialización de la aplicación:
BundleTable.EnableOptimizations = true;
En definitiva, es algo que ya podíamos solucionar desde la primera versión de forma manual, pero que ahora lo tendremos más fácil al venir integrado en el producto :-)

Publicado en Variable not found.

Aún no hay comentarios, ¡sé el primero!