ASP.NET 4.5–Nueva característica de Agrupación y Minificación

Hola que tal, hoy voy a hablar sobre una muy buena característica que nos trae ASP.NET 4.5. Para situarnos en el contexto, hablemos de optimización, ASP.NET nos ha dado mecanismos de optimización en el front-end y back-end. Técnicas de agrupación y Minificación ya  eran posibles de aplicar en ASP.NET, sin embargo, no con la facilidad y flexibilidad que nos presenta ASP.NET 4.5 Developer Preview , la cual introduce bundling(Agrupación o combinación), que nos permite combinar múltiples archivos JavaScript para una carga más rápida al evitar request por cada uno de los archivos js, y aplicando minificación, que reduce considerablemente el tamaño de los archivos JavaScript y CSS removiendo los caracteres innecesarios.

Veamos como funciona, para esto veamos la estructura típica de un proyecto ASP.NET WebForm:

image

El archivo index.aspx está simplificado al máximo solo para efectos demostrativos, veamos el código:

image

Como ves, solo tenemos la carga de los CSS y los Scripts, al momento de ver las peticiones request de la página veremos:

image

Nos podemos dar cuenta de la forma de la carga de los archivos,  tenemos 9 peticiones y 137KB.

Veamos ahora la nueva característica de ASP. NET 4.5, que permite reducir el numero de request combinando los archivos JS en uno solo, al igual que los archivos CSS, los cuales son minimizados automáticamente.

Primero que nada debemos hacer referencia ahora a las carpetas en donde se encuentran los script y estilos:

<link href=”Styles/css” rel=”stylesheet” type=”text/css” />

<script src=”Scripts/js” type=”text/javascript”></script>

Y en el globlax.asax, agregar en el método Application_Start la combinación por Default (EnableDefaultBundles)

<%@ Import Namespace=”System.Web.Optimization” %>

Sub Application_Start(ByVal sender As Object, ByVal e As EventArgs)

        BundleTable.Bundles.EnableDefaultBundles()

End Sub

Ahora en tiempo de ejecución automáticamente  se combinará y minimizarán los archivos JS y CSS, veamos:

image

Wow!!!, El CSS minimizado y el JS minimizado, él tamaño total del request es 80KB, pero una aclaración, debes  eliminar todos los archivos que nos vas a ocupar en producción, como por ejemplo, los ya minimizados, por que ahora ya no estas discriminando por archivo referenciado desde tu página, si no que es toda la carpeta Script, lo mismo para los CSS, además deben estar bien formateados o la minificación falla.

Para comprobar esto, podemos ver la respuesta del request al recurso CSS Minimizado

image

Ahora también puedes crear tu propio Bundling en el archivo globlal.asax, para CSS con CssMinify o para JavaScript JsMinify y agregrando los archivos que serán combinados y minimizados  con su ruta relativa.

  Sub Application_Start(ByVal sender As Object, ByVal e As EventArgs)

        BundleTable.Bundles.EnableDefaultBundles()

        Dim cssBundle = New Bundle(“~/Content/css”, GetType(CssMinify))

        cssBundle.AddFile(“~/Styles/css1.css”)

        cssBundle.AddFile(“~/Styles/css2.css”)

        cssBundle.AddFile(“~/Styles/css3.css”)

        cssBundle.AddFile(“~/Styles/css3.css”)

        

  End Sub

Para hacer un resumen:
Antes  del aplicar esta característica:9 Peticiones, 137Kb
Después de aplicar combinación y minificación:3 peticiones, 80Kb.

Espero que te sirva Sonrisa
Saludos!

2 comentarios en “ASP.NET 4.5–Nueva característica de Agrupación y Minificación”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *