Sie sind hier: Startseite | Wissen | Medien / Weblog
Werbung

ASP.NET MVC 4: Minification und Bundling

Foto ,
18.06.2013 08:11:00

Websites bestehen heutzutage häufig aus zahlreichen größeren CSS- und JavaScript-Dateien. Gerade beim Laden über langsame Netzwerkverbindungen (z.B. in Mobilfunknetzwerken) wird dies zum Problem. ASP.NET 4.5 bietet zwei Instrumente zur Beschleunigung:

CSS- und JavaScript-Dateien können vor der Übertragung zum Client verkleinert werden, indem Leerräume und Kommentare aus dem Quellcode entfernt werden.
Mehrere CSS- und JavaScript-Dateien können vor der Übertragung zu einer Datei zusammengefasst werden. Durch die Reduzierung der Anzahl der HTTP-Anfragen wird die Übertragung einer Webseite beschleunigt.
Zum Konfigurieren dieser Möglichkeiten, die sich Minification und Bundling nennen, sehen die Projektvorlagen eine Klasse BundleConfig im Ordner App_Start vor. Sie weist eine statische Methode RegisterBundles auf. Diese wird beim Start der Webanwendung zur Ausführung gebracht, indem sie von der Methode Application_Start in der Datei global.asax aufgerufen wird. Bei diesem Aufruf übergibt sie die statsiche Auflistung BundleTable.Bundles, welche per Definition sämtliche registrierte Bundles beinhaltet.
public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                "~/Scripts/jquery-{version}.js"));

    bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                "~/Scripts/jquery-ui-{version}.js"));

    bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                "~/Scripts/jquery.unobtrusive*",
                "~/Scripts/jquery.validate*",
                "~/Scripts/methods_de.js"));
   [...]
}

Das nachfolgende Listing zeigt einen Teil der Methode RegisterBundles, welche von der Projektvorlage Internet-Application eingerichtet wurde. An den Konstruktor von ScriptBundle übergibt sie den Namen des Bundes. Mit Include werden die einzelnen Dateien angegeben, die zum Bundle hinzuzufügen sind. Bei der Angabe dieser Dateinamen kann der Entwickler Platzhalter verwenden. Ein Stern (*) steht zum Beispiel für eine beliebige Zeichenkette; der Platzhalter {version} für eine Versionsnummer. Die vordefinierte Liste an Bundles kann der Entwickler nach Belieben erweitern.Wird in einer View über ein Script-Tag auf den Namen eines Bundles mit JavaScript-Dateien oder über einen Link-Tag auf den Namen eines Bundles mit CSS-Dateien verwiesen, erhält der Browser diese Dateien mit einer einzigen Anfrage in einer "minificated" Form. Dabei ist auch darauf zu achten, dass Bundles mit HTTP-Kopfzielen ausgeliefert werden, die den Browser ermutigen, sie zu cachen.