asp.net-mvc
Bundelen en verkleinen

minification

De verkleining wordt gebruikt om de grootte van CSS- en Javascript-bestanden te verminderen om de downloadtijden te versnellen. Dit proces wordt uitgevoerd door alle onnodige witruimte, opmerkingen en andere niet-essentiële inhoud uit de bestanden te verwijderen.

Dit proces wordt automatisch uitgevoerd bij gebruik van een ScriptBundle of een StyleBundle object. Als u het moet uitschakelen, moet u een Bundle .

Voorbeeld met behulp van Minification

De volgende code gebruikt preprocessorrichtlijnen om bundeling alleen tijdens releases toe te passen om eenvoudiger debuggen tijdens niet-releases mogelijk te maken (omdat niet-gebundelde bestanden meestal gemakkelijker te navigeren zijn):

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
}

Script- en stijlbundels

Het volgende is het standaardcodefragment voor het bestand 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",  
    }  
 } 

Bundels worden geregistreerd in het bestand Global.asax in de methode Application_Start ():

using System.Web.Optimization;

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

Bundels moeten als volgt in uw weergaven worden weergegeven:

@using System.Web.Optimization

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

Merk op dat bundeling niet optreedt wanneer u zich in de ontwikkelingsmodus bevindt (waarbij het compilatie-element in het bestand Web.config is ingesteld op debug = "true"). In plaats daarvan bevatten de Render-instructies in uw Views elk afzonderlijk bestand in een niet-gebundelde, niet-verkleinde indeling, voor het gemak van foutopsporing.

Zodra de toepassing in de productiemodus is (waarbij het compilatie-element in het bestand Web.config is ingesteld op debug = "false"), vindt bundeling plaats.

Dit kan leiden tot complicaties voor scripts die verwijzen naar relatieve paden van andere bestanden, zoals verwijzingen naar de pictogrambestanden van Twitter Bootstrap. Dit kan worden aangepakt met behulp van de klasse CssRewriteUrlTransform van System.Web.Optimization:

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

De klasse CssRewriteUrlTransform herschrijft relatieve URL's binnen de gebundelde bestanden naar absolute paden, zodat de referenties intact blijven nadat de aanroepreferentie naar de locatie van de bundel is verplaatst (bijv. Met behulp van de bovenstaande code, verplaatst van "~ / Content / css / bootstrap.css "naar" ~ / bundles / css / bootstrap.css ").