asp.net-mvc
Bundling e Minification

minification

Il minification viene utilizzato per ridurre le dimensioni dei file CSS e Javascript per velocizzare i tempi di download. Questo processo viene eseguito rimuovendo tutti gli inutili spazi bianchi, i commenti e qualsiasi altro contenuto non essenziale dai file.

Questo processo viene eseguito automaticamente quando si utilizza un oggetto ScriptBundle o StyleBundle . Se devi disabilitarlo, devi usare un oggetto Bundle base.

Esempio usando Minification

Il seguente codice utilizza le direttive del preprocessore per applicare il raggruppamento solo durante le versioni per consentire un debugging più semplice durante i non-rilasci (in genere i file non raggruppati sono più facili da navigare):

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
}

Pacchetti di sceneggiature e stili

Il seguente è lo snippet di codice predefinito per il file 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",  
    }  
 } 

I pacchetti sono registrati nel file Global.asax all'interno del metodo Application_Start ():

using System.Web.Optimization;

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

I pacchetti dovrebbero essere visualizzati nelle tue visualizzazioni in questo modo:

@using System.Web.Optimization

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

Si noti che il raggruppamento non si verifica quando si è in modalità di sviluppo (in cui l'elemento di compilazione nel file Web.config è impostato su debug = "true"). Invece, le istruzioni Render nelle tue Viste includeranno ogni singolo file in un formato non raggruppato, non minificato, per facilitare il debug.

Una volta che l'applicazione è in modalità di produzione (dove l'elemento di compilazione nel file Web.config è impostato su debug = "false"), il raggruppamento avrà luogo.

Questo può portare a complicazioni per script che fanno riferimento a percorsi relativi di altri file, come i riferimenti ai file icona di Bootstrap di Twitter. Questo può essere risolto utilizzando la classe CssRewriteUrlTransform di System.Web.Optimization:

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

La classe CssRewriteUrlTransform riscriverà gli URL relativi all'interno dei file raggruppati in percorsi assoluti, in modo che i riferimenti rimangano intatti dopo che il riferimento di chiamata è stato spostato nella posizione del pacchetto (ad esempio utilizzando il codice precedente, passando da "~ / Content / css / bootstrap.css "a" ~ / bundles / css / bootstrap.css ").