Bundling y Minification

Danae Aguilar Guzmán MCT, MS, MCTS, MCP

danae.aguilar@jalasoft.com

System.Web.Optimization

System.Web.Optimization

• Bundling de scripts y archivos de estilo• Minificación de scripts y archivos de estilo• Reduce el tiempo y cantidad de carga de la

página

• Bundle crea un archivo con el contenido de todos los archivos especificados, así reduce la cantidad de descargas

• Minification reduce el tamaño de los archivos • Se aplicará en modo release.

System.Web.Optimization

Configuración de Script bundles y style bundles

• Agregar los bundles al objeto global BundleTable

• Especificar el path virtual para el bundle

• Incluir los archivos necesarios en el bundle

• Podemos usar wildcards, por convención se ignoran los archivos doc y debug

System.Web.Optimization

Configuración de Script bundles y style bundles

* Es recomendado usar el path real como path virtual para evitar problemas con paths relativos

bundles.Add( new ScriptBundle("~/scripts/jqueryval") .Include("~/Scripts/jquery.unobtrusive*", "~/Scripts/jquery.validate*"));

bundles.Add( new StyleBundle("~/Content/themes/base/css") .Include( "~/Content/themes/base/jquery.ui.core.css", "~/Content/themes/base/jquery.ui.resizable.css"));

System.Web.Optimization

Usando los bundles:

@Styles.Render("~/Content/css") <link rel="stylesheet" type="text/css" href="@BundleTable.Bundles. ResolveBundleUrl("~/Content/css")" /> @Scripts.Render("~/scripts/jqueryval")

<compilation debug="false" targetFramework="4.5" />

System.Web.Optimization

Por defecto la aplicación esta en modo debug:

Cambiando a modo release, habilitará la generación de los bundles y también la minificación de scripts y estilos:

<compilation debug="true" targetFramework="4.5" />

System.Web.Optimization

Usando Fiddler para simular una descarga de modem y deshabilitar cache.

System.Web.Optimization

Inspeccionando la descarga en el navegador.

Abrimos los developer tools, con F12

• Iniciar la captura, desde el tab Network:

• Refrescamos la página

System.Web.Optimization

• Podemos ver el resumen de las descargas de la página actual:

• En la consola podemos ver la cantidad de conecciones simultaneas permitidasejecutando: window.maxConnectionsPerServer

System.Web.Optimization

• Podemos ver detalles de cada descarga:

• Podemos ver los tiempos del detalle: