asp.net-mvc
Empaquetado y Minificación

Minificación

La minificación se utiliza para reducir el tamaño de los archivos CSS y Javascript para acelerar los tiempos de descarga. Este proceso se realiza mediante la eliminación de todos los espacios en blanco, comentarios y cualquier otro contenido no esencial de los archivos.

Este proceso se realiza automáticamente cuando se utiliza un objeto ScriptBundle o StyleBundle . Si necesita deshabilitarlo, debe usar un objeto Bundle básico.

Ejemplo usando minificación

El siguiente código usa directivas de preprocesador para aplicar el agrupamiento solo durante las versiones a fin de permitir una depuración más fácil durante las versiones no liberadas (ya que los archivos no empaquetados suelen ser más fáciles de navegar):

public static void RegisterBundles(BundleCollection bundles)  
{  
    #if DEBUG
        bundles.Add(new Bundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));
        bundles.Add(new Bundle("~/Content/css").Include("~/Content/site.css"));  
    #else
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));
        bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));  
    #endif
}

Guiones y paquetes de estilo

El siguiente es el fragmento de código predeterminado para el archivo BundleConfig.cs.

using System.Web.Optimization;

public class BundleConfig  
{  
    // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725  
    public static void RegisterBundles(BundleCollection bundles)  
    {  
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(  
                    "~/Scripts/jquery-{version}.js"));  
                    
    // Use the development version of Modernizr to develop with and learn from. Then, when you're  
    // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.  
    bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(  
                "~/Scripts/modernizr-*"));  

    bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));  

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

Los paquetes se registran en el archivo Global.asax dentro del método Application_Start ():

using System.Web.Optimization;

protected void Application_Start() 
{
    BundleConfig.RegisterBundles(BundleTable.Bundles);
}

Los paquetes deben ser representados en tus Vistas como tal:

@using System.Web.Optimization

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/modernizr")
@Styles.Render("~/Content/css") 
@Styles.Render("~/Content/themes/base/css") 

Tenga en cuenta que la agrupación no se produce cuando está en modo de desarrollo (donde el elemento de compilación en el archivo Web.config se establece en debug = "true"). En su lugar, las declaraciones de Render en sus Vistas incluirán cada archivo individual en un formato no agrupado, no minificado, para facilitar la depuración.

Una vez que la aplicación está en modo de producción (donde el elemento de compilación en el archivo Web.config se establece en debug = "false"), se realizará la agrupación.

Esto puede llevar a complicaciones para los scripts que hacen referencia a rutas relativas de otros archivos, como las referencias a los archivos de iconos de Twitter Bootstrap. Esto se puede abordar utilizando la clase CssRewriteUrlTransform de System.Web.Optimization:

 bundles.Add(new StyleBundle("~/bundles/css").Include(
                "~/Content/css/*.css", new CssRewriteUrlTransform()));

La clase CssRewriteUrlTransform reescribirá las URL relativas dentro de los archivos agrupados en rutas absolutas, de modo que las referencias permanecerán intactas después de que la referencia de llamada se mueva a la ubicación del paquete (p. Ej., Utilizando el código anterior, pasando de "~ / Content / css / bootstrap.css "a" ~ / bundles / css / bootstrap.css ").