asp.net-mvc
Bündelung und Minifizierung

Minifizierung

Die Minifizierung wird verwendet, um die Größe von CSS- und Javascript-Dateien zu reduzieren, um die Downloadzeiten zu beschleunigen. Dieser Vorgang wird durch Entfernen aller unnötigen Leerzeichen, Kommentare und sonstiger nicht notwendiger Inhalte aus den Dateien durchgeführt.

Dieser Vorgang wird automatisch ausgeführt, wenn Sie ein ScriptBundle oder ein StyleBundle Objekt verwenden. Wenn Sie es deaktivieren müssen, müssen Sie ein einfaches Bundle Objekt verwenden.

Beispiel mit Minification

Im folgenden Code werden Präprozessoranweisungen verwendet, um die Bündelung nur während Releases anzuwenden, um das Debuggen während Nicht-Releases zu erleichtern (da nicht gebündelte Dateien normalerweise einfacher zu navigieren sind):

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- und Stilpakete

Das folgende Code-Snippet ist standardmäßig für die Datei 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",  
    }  
 } 

Bundles werden in der Global.asax-Datei innerhalb der Application_Start () - Methode registriert:

using System.Web.Optimization;

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

Bundles sollten in Ihren Ansichten folgendermaßen dargestellt werden:

@using System.Web.Optimization

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

Beachten Sie, dass die Bündelung nicht auftritt, wenn Sie sich im Entwicklungsmodus befinden (wobei das Kompilierungselement in der Datei Web.config auf debug = "true" gesetzt ist). Stattdessen enthalten die Render-Anweisungen in Ihren Ansichten jede einzelne Datei in einem nicht gebündelten, nicht reduzierten Format, um das Debuggen zu erleichtern.

Sobald sich die Anwendung im Produktionsmodus befindet (in dem das Kompilierungselement in der Datei Web.config auf debug = "false" gesetzt ist), erfolgt die Bündelung.

Dies kann zu Komplikationen für Skripts führen, die auf relative Pfade anderer Dateien verweisen, beispielsweise Verweise auf die Symboldateien von Twitter Bootstrap. Dies kann mithilfe der CssRewriteUrlTransform-Klasse von System.Web.Optimization behoben werden:

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

Die CssRewriteUrlTransform-Klasse schreibt relative URLs in den gebündelten Dateien in absolute Pfade um, sodass die Referenzen intakt bleiben, nachdem die aufrufende Referenz an den Speicherort des Bundles verschoben wurde (z. bootstrap.css "bis" ~ / bundles / css / bootstrap.css ").