Las próximas releases de .NET y Visual Studio incluyen un montón de nuevas características. Con ASP.NET 4.5 veremos mejoras realmente increíbles tanto en Web Forms como en MVC, así como en el núcleo de ASP.NET en el que se sustentan ambas tecnologías.

Introducción al empaquetado y a la minificación

A medida que más y más gente usa dispositivos móviles para navegar por la web, se hace más importante hacer que las aplicaciones que desarrollamos se comporten bien en ellos. Todos hemos visitado páginas web desde nuestros dispositivos - sólo para frustrarnos con la velocidad de carga debido a la lentitud de la red móvil. Si tu sitio o aplicación se carga lentamente, estás perdiendo clientes potenciales sólo por el bajo rendimiento. Incluso en máquinas de escritorio, el tiempo de carga de tu sitio y el rendimiento mostrado te puede hacer perder clientes.

La mayoría de sitios de hoy en día contienen un montón de archivos JavaScript y CSS para separar conceptos y mantener el código fuente limpio. Aunque esto es una buena práctica desde el punto de vista de la programación, normalmente tiene consecuencias desastrosas en el rendimiento total del sitio web. Varios archivos JavaScript y CSS requieren varias peticiones HTTP desde el navegador - bajando el rendimiento en el tiempo de carga.

Un ejemplo simple

He abierto un sitio local en IE9 y he grabado el tráfico de red usando las herramientas de desarrollo que vienen integradas (F12). Como vemos en la gráfica, el sitio consiste en 5 archivos CSS y 4 archivos JavaScript que el navegador se tiene que descargar. Cada archivo es solicitado independientemente por el navegador y devuelto por el servidor, y el tiempo de proceso puede suponer una cantidad de tiempo proporcional al número de archivos en cuestión:

Empaquetado

ASP.NET incluye una mejora que hace más sencillo "empaquetar" o "combinar" varios archivos CSS y JavaScript en unas pocas peticiones HTTP. Esto hace que el navegador tenga que hacer menos peticiones HTTP reduciendo así el tiempo que tarda en obtenerlos. La siguiente gráfica muestra el mismo tráfico que en el caso descrito anteriormente pero aprovechando la nueva funcionalidad de empaquetado de ASP.NET (realizando tan sólo una petición para el JavaScript y una sola para el CSS):

Ahora, el navegador tiene que realizar menos peticiones al servidor. El contenido de los archivos individuales se ha empaquetado/combinado en la misma respuesta, pero el contenido de los archivos es exactamente el mismo - el tamaño de los archivos es el mismo. Pero fijaos cómo incluso en una máquina local de desarrollo (en el que la latencia de red entre el servidor y el navegador es mínimo), el acto de empaquetar los archivos de CSS y JavaScript sigue reduciendo el tiempo total de carga en casi un 20%. En una red lenta la mejora del rendimiento sería incluso mejor.

Minificación

La próxima release de ASP.NET incluye una mejora que permite "minimizar" el tamaño de la descarga del contenido. Es un proceso que elimina espacios en blanco, comentarios y otros caracteres innecesarios tanto para las CSS's como para JavaScript. El resultado son archivos más pequeños, que se descargarán y cargarán en el navegador más rápido. La siguiente gráfica muestra el rendimiento que se ha conseguido aplicando tanto el empaquetado como la minificación:

Incluso en mi máquina de desarrollo (en el que la latencia de red es mínima), hemos conseguido un 40% de mejora en el rendimiento con respecto a la primera gráfica. En redes más lentas (y especialmente en clientes internacionales), la mejora es incluso más significante.

Uso del Empaquetado y la Minificación dentro de ASP.NET

En la próxima release de ASP.NET es realmente sencillo aprovecharse del empaquetado y la minificación en nuestros proyectos y ver el rendimiento que hemos ganado en escenarios como el anterior. La forma en que lo hace nos evita tener que usar herramientas personalizadas para esto en nuestro proceso de construcción - ASP.NET lo ha añadido en el runtime para realizar el Empaquetado/Minificación dinámicamente (cacheando los resultados incluso para mejorar aún más el rendimiento). Esto nos permite una experiencia de desarrollo limpia y súper fácil de empezar a usar.

Supongamos que tenemos un pequeño proyecto con 4 archivos de JavaScript y 6 archivos CSS:

Empaquetando y Minificando los archivos .css

Supongamos que queremos referenciar todas las hojas de estilo del directorio "Styles". Hasta ahora teníamos que referenciar varias referencias a las CSS para tenerlas todas - lo que resultaría en 6 peticiones HTTP:

La nueva característica de empaquetado/minificación nos permite empaquetar y minificar todos los archivos .css del directorio Styles - simplemente mandando una petición URL al directorio (en este caso "styles") con la cadena "/css" al final. Por ejemplo:

Esto hará que ASP.NET escanee el directorio, empaquete y minifique los archivos .css que contenga, y devolverá una sola petición HTTP con todo el contenido CSS al navegador.

No tenemos que ejecutar ninguna herramienta ni pre-procesar nada para conseguir este comportamiento. Esto nos permite separar de manera clara nuestras css en archivos lógicos separados manteniendo una experiencia de desarrollo limpia - sin tener ninguna pérdida de rendimiento en tiempo de ejecución. El diseñador de Visual Studio hará honor a la lógica de empaquetado/minifiación también - de manera que seguiremos teniendo la experiencia WYSWIYG como hasta ahora.

Empaquetando y minificando los archivos JavaScript

Al igual que con las CSS, si queremos empaquetar y minificar todos nuestros JavaScript en tan sólo una respuesta podemos enviar una petición URL al directorio (en este caso "scripts") añadiendo la cadena "/js" al final:

Esto hará que ASP.NET escanee el directorio, empaquete y minifique los archivos .js que contenga, y devolverá una sola petición HTTP con todo el contenido JavaScript al navegador. De nuevo, no tenemos que ejecutar ninguna herramienta para que esto ocurra. Y funciona en todos los navegadores.

Orden de los archivos en un paquete

Por defecto, cuando ASP.NET empaqueta los archivos se ordenan primero alfabéticamente, igual que se muestran en el Explorador de Soluciones. Después son ordenados de manera que primero se cargan las extensiones como jQuery, MooTools y Dojo. Así que el orden del empaquetado del directorio Scripts anterior sería:

1. Jquery-1.6.2.js
2. Jquery-ui.js
3. Jquery.tools.js
4. a.js

Por defecto, los archivos CSS también son ordenados alfabéticamente en primer lugar para luego colocar primero los archivos reset.css y normalize.css (si existiesen). De manera que el orden del directorio Styles anterior sería:

1. reset.css
2. content.css
3. forms.css
4. globals.css
5. menu.css
6. styles.css

La ordenación es totalmente personalizable, y se puede cambiar a la mayoría de los casos y a cualquier patrón de nombrado que prefiramos. El objetivo de esta funcionalidad es tener aquel ordenamiento lo suficientemente inteligente que podamos usar y salir airoso.

Se soporta cualquier número de directorios y subdirectorios

En el ejemplo anterior hemos usado unos directorios simples para nuestra aplicación. Esto funciona para algún tipo de aplicaciones (por ejemplo: aplicaciones de una sola página). Normalmente, querremos tener varios empaquetados de CSS/JS en nuestra aplicación- por ejemplo: un empaquetado "común" con los JS y CSS que usan todas las páginas, y luego los archivos específicos de la página que no son globales.

Podemos usar el soporte de empaquetado/minificación con cualquier número de directorios y subdirectorios en nuestro proyecto - esto hace más fácil estructurar nuestro código y maximizar los beneficios del empaquetado/minificado. Cada directorio puede ser accedido como un empaquetado separado.

Extensibilidad en el empaquetado/minificado

El soporte de empaquetado/minificado de ASP.NET ha sido creado teniendo en cuenta la extensibilidad en cuenta, y cada parte del proceso puede ser extendido o reemplazado.

Reglas personalizadas

Además de permitir la aproximación en base a directorios de empaquetado, ASP.NET permite registrar empaquetados personalizados usando una nueva API que también incluimos.

El código siguiente muestra cómo podemos registrar un empaquetado llamado "customscript" usando código en la clase Global.asax de nuestra aplicación. La API nos permite añadir/eliminar/filtrar archivos que van a ir dentro del empaquetado de manera muy granular:

El empaquetado personalizado anterior puede ser referenciado desde cualquier parte de la aplicación usando la referencia <script>:

Procesado personalizado

También podemos sobrescribir los empaquetados CSS y JavaScript para que soporten un procesado personalizado de archivos (por ejemplo: reglas personalizadas de minificación, soporte para sintaxis Saas, LESS o Cofeesript, etc).

En el siguiente ejemplo estamos indicando que queremos reemplazar las transformaciones por defecto de minifícación con las clases MyJsTransforms y MyCssTransform. Ambas son subclases de las clases minificadoras para JavaScript y CSS respectivamente y puede añadir funcionalidad extra:

El resultado final de esta extensibilidad es que podemos incluir lógica de empaquetado/minificación y añadir algunas cosas chulas

Video de 2 minutos sobre empaquetado y minificación:

Mads Kristensen tiene un video de 90 segundos donde nos muestra el uso de la nueva característica de empaquetado y minificación.

Resumen

La nueva característica de empaquetado y minificación de la próxima release de ASP.NET hará más fácil crear aplicaciones web rápidas. Es muy sencillo de usar, y no requiere ningún cambio en nuestro flujo de desarrollo. También es extensible y nos permite personalizar lo que queramos.

Podemos aprovechar esta característica en ASP.NET MVC, ASP.NET Web Forms y ASP.NET Web Pages.

Espero que sirva.

Este artículo ha sido traducido por Juan María Laó Ramos.