asp.net-mvc
Sprzedaż wiązana i minimalizacja

Minifikacja

Minimalizacja służy do zmniejszenia rozmiaru plików CSS i Javascript w celu przyspieszenia czasu pobierania. Proces ten odbywa się poprzez usunięcie wszystkich niepotrzebnych białych znaków, komentarzy i wszelkich innych nieistotnych treści z plików.

Ten proces jest wykonywany automatycznie, gdy używany jest obiekt ScriptBundle lub StyleBundle . Jeśli chcesz go wyłączyć, musisz użyć podstawowego obiektu Bundle .

Przykład użycia Minifikacji

Poniższy kod używa dyrektyw preprocesora do stosowania pakietowania tylko podczas wydań, aby umożliwić łatwiejsze debugowanie podczas wydań (ponieważ pliki niepakowane są zazwyczaj łatwiejsze w nawigacji):

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
}

Pakiety skryptów i stylów

Poniżej znajduje się domyślny fragment kodu dla pliku 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",  
    }  
 } 

Pakiety są rejestrowane w pliku Global.asax w metodzie Application_Start ():

using System.Web.Optimization;

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

Pakiety powinny być renderowane w widokach w następujący sposób:

@using System.Web.Optimization

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

Zauważ, że łączenie nie występuje, gdy jesteś w trybie programowania (gdy Element kompilacji w pliku Web.config jest ustawiony na debug = „true”). Zamiast tego instrukcje renderowania w twoich widokach będą zawierać każdy pojedynczy plik w niepowiązanym, nie zminimalizowanym formacie, aby ułatwić debugowanie.

Gdy aplikacja znajdzie się w trybie produkcyjnym (gdy element kompilacji w pliku Web.config jest ustawiony na debugowanie = „fałsz”), nastąpi wiązanie.

Może to prowadzić do komplikacji dla skryptów, które odwołują się do względnych ścieżek innych plików, takich jak odniesienia do plików ikon Twitter Bootstrap. Można temu zaradzić za pomocą klasy CssRewriteUrlTransform System.Web.Optimization:

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

Klasa CssRewriteUrlTransform przepisze względne adresy URL w plikach pakietowych na ścieżki bezwzględne, dzięki czemu referencje pozostaną nienaruszone po przeniesieniu odwołania do lokalizacji pakietu (np. Przy użyciu powyższego kodu, przejście z „~ / Content / css / bootstrap.css ”na„ ~ / bundles / css / bootstrap.css ”).