asp.net-mvc
Bundling och Minification

minification

Minifieringen används för att minska storleken på CSS- och Javascript-filer för att påskynda nedladdningstiderna. Den här processen görs genom att ta bort allt onödigt vitrum, kommentarer och allt annat icke-viktigt innehåll från filerna.

Denna process görs automatiskt när du använder ett ScriptBundle eller ett StyleBundle objekt. Om du behöver inaktivera det måste du använda ett grundläggande Bundle .

Exempel med användning av Minifiering

Följande kod använder förbehandlingsdirektiv för att tillämpa paket endast under utgivningar för att möjliggöra enklare felsökning under icke-utgivningar (eftersom filer som inte är bundna vanligtvis är lättare att navigera igenom):

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
}

Skript- och stilpaket

Följande är standardkodavsnitt för filen 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",  
    }  
 } 

Buntar registreras i Global.asax-filen i metoden Application_Start ():

using System.Web.Optimization;

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

Buntar ska återges i dina vyer så:

@using System.Web.Optimization

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

Observera att paket inte inträffar när du är i utvecklingsläge (där kompileringselementet i Web.config-filen är inställt på debug = "true"). Istället kommer Render-uttalandena i dina vyer att inkludera varje enskild fil i ett icke-paketat, icke-minifierat format för att underlätta felsökning.

När applikationen är i produktionsläge (där kompileringselementet i Web.config-filen är inställt på felsökning = "falskt") kommer paket att ske.

Detta kan leda till komplikationer för skript som refererar till relativa sökvägar för andra filer, till exempel referenser till Twitter Bootstraps ikonfiler. Detta kan hanteras med hjälp av System.Web.Optimization's CssRewriteUrlTransform-klass:

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

Klassen CssRewriteUrlTransform kommer att skriva om relativa webbadresser i de bundna filerna till absoluta banor, så att referenserna kommer att förbli intakta efter att referensreferensen har flyttats till platsen för paketet (t.ex. med ovanstående kod, flyttande från "~ / Content / css / bootstrap.css "till" ~ / bundles / css / bootstrap.css ").