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!
martes, 18 de octubre de 2011
ASP.NET MVCHabía comentado que una de las novedades que ya podíamos disfrutar en la developer preview de MVC 4 era el sistema de compactación y minimización de scripts y CSS, y que, además de ser bastante útil y sencillo, podíamos utilizarlo a día de hoy en nuestras aplicaciones MVC 3 e incluso en ASP.NET Webforms.

Este mecanismo hace posible la creación de bundles, o paquetes de uno o varios archivos de scripts o estilos, que son optimizados en tamaño por el servidor y cargados desde las páginas en una única petición. El proceso de compactación se realizaría en servidor, pero sólo la primera vez, quedando almacenado en caché para las peticiones posteriores.


Por ejemplo, en el caso de los scripts, en lugar de tener en nuestras vistas o layouts referencias hacia decenas de archivos “.js” (jQuery, UI, validadores, plugins, etc.), simplemente incluiríamos la carga de un archivo, que sería generado por el servidor mediante el empaquetado y la compactación de todos ellos.

Y con las hojas de estilo CSS ocurriría lo mismo: podríamos cargar desde el cliente un único archivo .css, que contendría la suma compactada de todos los necesarios para el funcionamiento de la aplicación.
<disclaimer>
Todo lo que voy a contar a continuación está probado con la versión previa para desarrolladores de MVC. El ensamblado Microsoft.Web.Optimization es la versión 0.1, y de él puede cambiar hasta el nombre ;-)
</disclaimer>
Para empezar, el paquete Microsoft.Web.Optimization se incluye instalado de serie en MVC 4 (a día de hoy, hay que decir). En cambio, en ASP.NET MVC 3 o Webforms debemos descargarlo utilizando Nuget:
PM> Install-Package Microsoft.Web.Optimization
Successfully installed 'Microsoft.Web.Optimization 0.1'.
Successfully added 'Microsoft.Web.Optimization 0.1' to Mvc4Application49.
Una vez instalado, ya casi tenemos el trabajo hecho ;-)

La forma rápida

Si lo que queremos es probar rápidamente el sistema de empaquetado, basta con añadir el siguiente código en la inicialización de nuestra aplicación:
   protected void Application_Start()
   {
       ... 
       BundleTable.Bundles.EnableDefaultBundles();
       ...
¡Y esto es todo! A partir de este momento, podemos acceder a las URL:
  • /scripts/js, que nos retornará un único archivo script conteniendo todos los scripts disponibles en la carpeta /scripts del proyecto (sin incluir subdirectorios), minimizados y compactados.
  • /content/css, que de la misma forma, retornará un único archivo .css conteniendo la suma compactada de todos los css que el sistema encuentre en la carpeta /content.
Vale, he simplificado un poco para que pudierais comprender rápidamente el ejemplo, pero en realidad es aún más potente:
  • Cualquier petición del estilo “{path}/js” hará que el sistema retorne en un único archivo compactado todos los scripts disponibles en la carpeta {path}.
  • De la misma forma, todas las peticiones a “{path}/css” retornará un único archivo .css con la suma compactada de todas las hojas de estilo presentes en la carpeta {path}.
  • Se eliminan las versiones de documentación (*-vsdoc.js, *.debug.js…), es decir, serán ignoradas todas ellas a la hora de generar el archivo compactado único.
  • Se tiene en cuenta la ordenación, sobre todo a la hora de anexar los scripts en un único archivo. De esta forma, scripts como jQuery se carguen antes que sus plugins, y otros habituales en el mundo CSS como reset.css o normalize.css sean cargados al final del bundle de estilos.
Si queremos hacer utilizar estos archivos minimizados en nuestro sitio web, simplemente tendremos que acudir al layout (o master) y modificar los enlaces hacia estas direcciones. Observad que tendréis que poner un enlace por cada carpeta:
   <link href="/Content/css" rel="stylesheet" type="text/css" />
   <script src="/Scripts/js" type="text/javascript"></script>
Ojo, muy Importante: para que todo funcione bien los scripts deben ser sintácticamente correctos, de lo contrario podemos encontrarnos con que la versión compactada nos dé fallos en tiempo de ejecución.  Esto es así porque el proceso de compactación no sólo elimina espacios sobrantes, sino que acorta los nombres de variables y funciones privadas.

De hecho, a día de hoy este sistema no funciona bien con las bibliotecas que se encuentran por defecto en la carpeta /scripts de los proyectos MVC 3, es necesario actualizarlos (usando Nuget son sólo unos segundos). Con los scripts incluidos en MVC 4 no hay problema.

También los .css deben ser correctos, aunque en caso contrario lo único que ocurrirá es que se retornará un único archivo sin compactar.

¡Quiero más control!

El sistema de bundling es realmente potente y flexible. En el ejemplo anterior se trataba de poner en marcha este sistema de forma rápida, pero se puede conseguir un control mucho más exhaustivo sobre lo que se compacta y lo que no, y sobre la forma de acceder a estos recursos.

La siguiente porción de código muestra cómo podríamos inicializar la tabla de bundles de forma más detallada:
   Bundle cssBundle = new Bundle("~/estilo.css", typeof(CssMinify));
   cssBundle.AddDirectory("/content", "*.css", searchSubdirectories: true);
   BundleTable.Bundles.Add(cssBundle);

   Bundle jsBundle = new Bundle("~/scripts.js", typeof (JsMinify));
   jsBundle.AddFile("~/scripts/jquery-1.6.4.js");
   jsBundle.AddFile("~/scripts/modernizr-2.0.6.js");
   jsBundle.AddDirectory("~/scripts/site", "*.js", searchSubdirectories: false);
   BundleTable.Bundles.Add(jsBundle);
Como podemos observar, en primer lugar se crea un bundle de tipo CSS, en el que se añaden todos los archivos con el patrón *.css que se encuentren en la carpeta /content y todos sus subdirectorios. Este paquete compactado sería accesible a través de la URL “/estilo.css”.

En el segundo bloque creamos un bundle en la URL “/script.js” al que añadimos algunos archivos de forma manual, y todos los .js que encontremos en la carpeta /scripts/site, sin incluir subdirectorios.

¿Fácil, verdad?

En conclusión, aunque todavía tendrá que cambiar, en este momento ya podemos ver una herramienta muy potente y sencilla de utilizar, que seguro entrará a formar parte de nuestros desarrollos en breve. Ya el colmo sería que los contenidos se comprimieran en gzip, pero por la pinta que tienen los componentes probablemente sea una funcionalidad a la que podamos aspirar en breve :-)

Publicado en: Variable not found.

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