Habilitar minification y bundling en ASP WebForms

Introducción
 
Cuando se están desarrollando aplicaciones web utilizando Microsoft ASP .Net WebForms, nos encontramos con proyectos legados que normalmente no hacen uso de optimizaciones al manejar archivos Javascript o CSS, hablo de legados ya que con las nuevas plantillas que se generan este tipo de proyectos en IDE recientes como por ejemplo VS 2013, este tipo de metodologías de optimización se implementan por defecto al crear el proyecto.
 

 
En este ejemplo se busca ilustrar el proceso por el cual se pueden habilitar optimizaciones en los archivos mencionados anteriormente, por medio de dos técnicas principales la minificación (Minification) y el empaquetado (Bundling), para empezar es necesario conocer estos dos términos y por que son importantes a la hora de desarrollar y desplegar aplicaciones web.
 

 
Minificación: Es una técnica de optimización que permite que los archivos JS y CSS sean llevados a su mínima expresión, reduciendo el tamaño final en Kb que deben ser descargados desde el servidor al cliente, por ejemplo, un archivo JS que puede pesar 500Kb después del proceso de vinificación puede terminar en unos 250Kb, dependiendo de su contenido, esto facilita y optimiza la descarga de dicho archivo al ser consumido por un cliente.
 

 
Empaquetado: Normalmente los navegadores actuales cuando descargan una página web desde un servidor determinado, están regidos por un limite de 6 conexiones http simultáneas, las cuales son utilizadas y gestionadas por el navegador para descargar imágenes, scripts, estilos y todos los demás archivos que compongan la página navegada, al utilizar la técnica de empaquetado podemos lograr que por medio de una sola solicitud http se descarguen a la vez varios archivos, por ejemplo, pensemos en los archivos JS de jQuery y de jQuery-ui, para descargarlos mínimo necesitaríamos de 2 solicitudes HTTP, por medio de la metodología de empaquetado podemos lograr que se descarguen ambos archivos en un solo paquete (una sola solicitud), liberando una de las solicitudes disponibles en el navegador para descargar otro archivo requerido por la página.
 

 
Ambas técnicas se traducen en mejores tiempos de carga de nuestra aplicación y por supuesto mejor manejo de cacheo de estos archivos.
 

 
Construyendo el ejemplo
 
Para construir y ejecutar el ejemplo debes tener Microsoft Visual Studio 2013. En la mayoría de los casos puedes ejecutar la aplicación siguiendo estos pasos:
 [ol] [li]Descargar y extraer el archivo .zip.[/li] [li]Abrir la carpeta como un sitio web de Microsoft Visual Studio.[/li] [li]Construir la solución lo cual descargará automáticamente los paquetes Nuget faltantes.[/li] [li]Ejecutar la aplicación.[/li] [/ol]

 
Descripción
 
La solución consta básicamente de una página ASPX, en la cual se importan dos archivos un JS y una hoja de estilos CSS muy básicos, en este ejemplo se puede evidenciar como dependiendo de la parametrización de inicio que tengamos (Debug o no), el compilado se entrega con las metodologías de minificación y empaquetado (No debug) o se entregan de la forma convencional (Debug).
 
Lo primero que se tiene que realizar para habilitar estas técnicas es el instalar el paquete Nuget Web Optimization Framework, el cual se puede agregar desde el gestor de paquetes de Nuget.
 

 
 
 
Una vez agregado se debe parametrizar los paquetes que queremos agregar sean de estilos o de scripts, para esto se utiliza una clase la cual referencia todos los archivos y los paquetes en los cuales queremos agregarlos.
 

 
Visual Basic .Net
 
Imports System.Web.Optimization 
 
Public Class Bundle
 

 
    Public Shared Sub RegistrarBundles(bundles As BundleCollection )
 
        bundles.Add(New ScriptBundle("~/bundles/scripts").Include(
 
                        "~/Scripts/jsInicial.js"
 
                ))
 

 
        bundles.Add(New StyleBundle("~/bundles/estiloscss").Include(
 
                        "~/App_Themes/CSS/Estilos.css"
 
                ))
 

 
    End Sub
 

 
End Class
 

 
Lo siguiente a realizar es indicarle a nuestra aplicación por medio del archivo Global.asax, específicamente en el método Application_Start que se deben registrar los paquetes que definimos en el punto anterior.
 

 
Visual Basic .Net
 
Imports System.Web.Optimization 
 
Public Class Global_asax
 
    Inherits System.Web.HttpApplication
 

 
    Sub Application_Start(ByVal sender As Object, ByVal e As EventArgs)
 
        ' Fires when the application is started
 
        Bundle.RegistrarBundles(BundleTable.Bundles )
 
    End Sub
 

 
A continuación modificaremos el tipo de importación de archivos que realizamos en nuestra página web, utilizando la metodología de render tanto para scripts  como para estilos e importamos la librería System.Web.Optimization.
 

 
HTML - ASP .Net
 
<%@ Import Namespace="System.Web.Optimization" %>
 

 
<!DOCTYPE html>
 

 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head runat="server">
 
    <title></title>
 
    
 
    
 
</head>
 
<body>
 
    <form id="form1" runat="server">
 
    <div>
 
        <input class="textonormal" type="text"/>
 
        <button id="btnAceptar" onclick="MostrarMensaje('Prueba');">Aceptar</button>
 
    </div>
 
    </form>
 
    
 
    <%: Scripts.Render("~/bundles/scripts") %>
 
    <%: Styles.Render("~/bundles/estiloscss") %>
 
</body>
 
</html>
 

 
Por último antes de realizar la compilación de nuestra aplicación debemos indicarle a Visual Studio que tipo de compilación queremos realizar, recuerden que cuando hacemos debug, el empaquetado y vinificación no estarán habilitados, permitiendo visualizar el código de los archivos sin ninguna alteración, pero cuando compilamos en modo release (sin debug), la optimización realizará su trabajo aplicando las técnicas de minificación y empaquetado para los archivos que definimos anteriormente.
 

 
ASP .Net Web.Config (Release)
 
<system.web>
 
    <compilation debug="false" strict="false" explicit="true" targetFramework="4.5" />
 
    <httpRuntime targetFramework="4.5" />
 
  </system.web>
 

 
ASP .Net Web.Config (Debug)
 
<system.web>
 
    <compilation debug=?true? strict="false" explicit="true" targetFramework="4.5" />
 
    <httpRuntime targetFramework="4.5" />
 
  </system.web>
 

 
El resultado de estas optimizaciones nos entregarán una página que es servida a los navegadores clientes de una forma mucho más optima:
 

 

 
Archivos del código fuente
 
La solución incluye los siguientes archivos importantes:
 [ul] [li]Index.aspx - Página principal del ejemplo en donde se importan los archivos generados para la vinificación y el empaquetado.[/li] [li]Estilos.CSS - Hoja de estilos básica para el ejemplo.[/li] [li]jsInicial.js - Código JavaScript básico para el ejemplo.[/li] [/ul]

 
Más información
 
Vídeo con la explicación paso a paso de la construcción de este ejemplo: 
 

 

Espero que les sea de ayuda.

Saludos.
Habilitar minification y bundling en ASP WebForms
0 Puntos Score: 0/10
Visitas: 557 Favoritos: 3
2 Comentarios Habilitar minification y bundling en ASP WebForms
Gracias.
Sabes si hay algun Manual de asp.net?
(pero enfocado a usar .vbhtml y no .aspx)
Lo que me interesa es un manual que use HTML tradicional para la parte visual, y no los tags <asp:xxxxx> que se usan en la mayor?
@sominus No tengo un tutorial propiamente de MVC (.vbhtml o .cshtml) que es lo que preguntas, el tema es que tanto en WebForms (aspx) como en MVC puedes utilizar HTML nativo para desarrollar, de hecho en MVC existe lo que se llama Helpers que son objetos utilitarios que son interpretados por el servidor para devolver c?
Para dejar un comentario Registrate! o.. eres ya usuario? Accede!