Bündelung und Minimierung

Artikel
07/16/2024

Bündelung und Minifizierung sind zwei Techniken, die Sie in ASP.NET 4.5 verwenden können, um die Ladezeit der Anforderung zu verbessern. Bündelung und Minimierung verbessern die Ladezeit, indem die Anzahl der Anforderungen an den Server reduziert und die Größe der angeforderten Ressourcen (z. B. CSS und JavaScript) reduziert wird.)

Die meisten der aktuellen Hauptbrowser beschränken die Anzahl der gleichzeitigen Verbindungen pro Hostnamen auf sechs. Das bedeutet, dass während sechs Anforderungen verarbeitet werden, zusätzliche Anforderungen für Ressourcen auf einem Host vom Browser in die Warteschlange gestellt werden. In der nachstehenden Abbildung zeigt die IE F12-Entwicklertools-Netzwerkregisterkarten die Anzeigedauer für Ressourcen, die von der Infoansicht einer Beispielanwendung benötigt werden.

B/M

Die grauen Balken zeigen die Zeit an, zu der die Anforderung vom Browser in die Warteschlange gestellt wird, die auf das sechs Verbindungslimit wartet. Der gelbe Balken ist die Anforderungszeit für das erste Byte, d. h. die Zeit zum Senden der Anforderung und empfangen die erste Antwort vom Server. Die blauen Balken zeigen die Benötigte Zeit für den Empfang der Antwortdaten vom Server an. Sie können auf eine Ressource doppelklicken, um detaillierte Anzeigedauerinformationen zu erhalten. Die folgende Abbildung zeigt beispielsweise die Anzeigedauerdetails zum Laden der Datei "/Scripts/MyScripts/JavaScript6.js ".

Screenshot der Netzwerkregisterkarte

Die vorangehende Abbildung zeigt das Startereignis , das die Zeit angibt, zu der die Anforderung aufgrund des Browserlimits für die Anzahl gleichzeitiger Verbindungen in die Warteschlange gestellt wurde. In diesem Fall wurde die Anforderung für 46 Millisekunden in die Warteschlange gestellt, die auf den Abschluss einer anderen Anforderung warten.

Bündelung

Bündelung ist ein neues Feature in ASP.NET 4.5, das das Kombinieren oder Bündeln mehrerer Dateien in einer einzelnen Datei erleichtert. Sie können CSS, JavaScript und andere Bündel erstellen. Weniger Dateien bedeuten weniger HTTP-Anforderungen und können die Leistung beim Laden der ersten Seite verbessern.

Die folgende Abbildung zeigt die gleiche Anzeigedauer der zuvor gezeigten Infoansicht, dieses Mal jedoch mit aktivierter Bündelung und Minimierung.

Screenshot der Registerkarte

Minimierung

Die Minimierung führt eine Vielzahl verschiedener Codeoptimierungen für Skripts oder CSS durch, z. B. das Entfernen unnötiger Leerzeichen und Kommentare und das Kürzen von Variablennamen auf ein Zeichen. Betrachten Sie die folgende JavaScript-Funktion.

AddAltToImg = function (imageTagAndImageID, imageContext) {
    ///<signature>
    ///<summary> Adds an alt tab to the image
    // </summary>
    //<param name="imgElement" type="String">The image selector.</param>
    //<param name="ContextForImage" type="String">The image context.</param>
    ///</signature>
    var imageElement = $(imageTagAndImageID, imageContext);
    imageElement.attr('alt', imageElement.attr('id').replace(/ID/, ''));
}

Nach der Minimierung wird die Funktion auf Folgendes reduziert:

AddAltToImg = function (n, t) { var i = $(n, t); i.attr("alt", i.attr("id").replace(/ID/, "")) }

Zusätzlich zum Entfernen der Kommentare und unnötigem Leerzeichen wurden die folgenden Parameter und Variablennamen wie folgt umbenannt (gekürzt):

Original	Umbenannt
imageTagAndImageID	n
imageContext	t
imageElement	i

Auswirkungen von Bundling und Minification

Die folgende Tabelle zeigt mehrere wichtige Unterschiede zwischen der Auflistung aller Ressourcen einzeln und der Verwendung von Bündelung und Minifizierung (B/M) im Beispielprogramm.

	Verwenden von B/M	Ohne B/M	Ändern
Dateianforderungen	9	34	256%
KB gesendet	3,26	11.92	266%
KB empfangen	388.51	530	36 %
Ladezeit	510 MS	780 MS	53 %

Die gesendeten Bytes haben eine erhebliche Reduzierung der Bündelung, da Browser ziemlich ausführlich mit den HTTP-Headern sind, die sie auf Anforderungen anwenden. Die Verringerung der empfangenen Bytes ist nicht so groß, da die größten Dateien (Skripts\jquery-ui-1.8.11.min.js und Skripts\jquery-1.7.1.min.js) bereits minimiert werden. Hinweis: Die Anzeigedauern des Beispielprogramms verwendeten das Fiddler-Tool , um ein langsames Netzwerk zu simulieren. (Vom Fiddler Menü "Regeln ", wählen Sie "Leistung " und dann "Modemgeschwindigkeiten simulieren" aus.)

Debuggen gebündelter und minimierter JavaScript-Code

Es ist einfach, Ihr JavaScript in einer Entwicklungsumgebung (in der das Kompilierungselement in der Datei "Web.config " festgelegt ist) zu debug="true" debuggen, da die JavaScript-Dateien nicht gebündelt oder minimiert werden. Sie können auch einen Releasebuild debuggen, in dem Ihre JavaScript-Dateien gebündelt und minimiert werden. Mithilfe der IE F12-Entwicklertools debuggen Sie eine JavaScript-Funktion, die in einem minimierten Bundle enthalten ist, indem Sie den folgenden Ansatz verwenden:

Wählen Sie die Registerkarte "Skript " und dann die Schaltfläche "Debuggen starten" aus .
Wählen Sie das Bundle aus, das die JavaScript-Funktion enthält, die Sie mithilfe der Schaltfläche "Assets" debuggen möchten.
Formatieren Sie das minimierte JavaScript, indem Sie die Schaltfläche "Konfiguration" auswählen und dann "JavaScript formatieren" auswählen.
Wählen Sie im Eingabefeld "Suchskript " den Namen der Funktion aus, die Sie debuggen möchten. In der folgenden Abbildung wurde "AddAltToImg " in das Eingabefeld "Suchskript " eingegeben.

Weitere Informationen zum Debuggen mit den F12-Entwicklertools finden Sie im MSDN-Artikel "Verwenden der F12-Entwicklertools zum Debuggen von JavaScript-Fehlern".

Steuern von Bündelung und Minifizierung

Bündelung und Minimierung werden aktiviert oder deaktiviert, indem der Wert des Debug-Attributs im Kompilierungselement in der Datei "Web.config" festgelegt wird. Im folgenden XML-Code ist "true" festgelegt, debug sodass Bündelung und Minimierung deaktiviert ist.

<system.web>
    <compilation debug="true" />
    <!-- Lines removed for clarity. -->
</system.web>

Um Bündelung und Minimierung zu aktivieren, legen Sie den debug Wert auf "false" fest. Sie können die Einstellung "Web.config " mit der EnableOptimizations Eigenschaft der BundleTable Klasse überschreiben. Mit dem folgenden Code werden Bündelung und Minimierung aktiviert und alle Einstellungen in der Datei "Web.config " außer Kraft gesetzt.

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                 "~/Scripts/jquery-{version}.js"));

    // Code removed for clarity.
    BundleTable.EnableOptimizations = true;
}

Hinweis

true Sofern EnableOptimizations nicht das Debug-Attribut im Kompilierungselement in der Datei Web.config auf falsefestgelegt ist, werden Dateien nicht gebündelt oder minimiert. Darüber hinaus wird die MIN-Version von Dateien nicht verwendet, die vollständigen Debugversionen werden ausgewählt. EnableOptimizationssetzt das Debug-Attribut im Kompilierungselement in der Datei "Web.config" außer Kraft.

Verwenden von Bündelung und Minimierung mit ASP.NET Webformularen und Webseiten

Informationen zu Webseiten finden Sie im Blogeintrag Hinzufügen der Weboptimierung zu einer Webseitenwebsite.
Informationen zu Web Forms finden Sie im Blogeintrag Hinzufügen von Bundling und Minification zu Web Forms.

Verwenden von Bündelung und Minification mit ASP.NET MVC

In diesem Abschnitt erstellen wir ein ASP.NET MVC-Projekt, um Bündelung und Minifizierung zu untersuchen. Erstellen Sie zunächst ein neues ASP.NET MVC-Internetprojekt mit dem Namen MvcBM , ohne die Standardwerte zu ändern.

Öffnen Sie die Datei "App\_Start\BundleConfig.cs ", und überprüfen Sie die RegisterBundles Methode, die zum Erstellen, Registrieren und Konfigurieren von Bündeln verwendet wird. Der folgende Code zeigt einen Teil der RegisterBundles Methode.

public static void RegisterBundles(BundleCollection bundles)
{
     bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                 "~/Scripts/jquery-{version}.js"));
         // Code removed for clarity.
}

Der vorangehende Code erstellt ein neues JavaScript-Bündel mit dem Namen ~/bundles/jquery , das alle geeigneten (d. h. debug- oder minified, aber nicht ) enthält.vsdoc) Dateien im Ordner Skripts , die der Wildcardzeichenfolge "~/Scripts/jquery-{version}.js" entsprechen. Für ASP.NET MVC 4 bedeutet dies bei einer Debugkonfiguration, dass die Datei jquery-1.7.1.js dem Bundle hinzugefügt wird. In einer Releasekonfiguration werden jquery-1.7.1.min.js hinzugefügt. Das Bündelungsframework folgt mehreren gemeinsamen Konventionen, z. B.:

Wählen Sie die Datei ".min" für die Freigabe aus, wenn FileX.min.js und FileX.js vorhanden sind.
Auswählen der nicht ".min"-Version für das Debuggen.
Ignorieren von "-vsdoc"-Dateien (z . B. jquery-1.7.1-vsdoc.js), die nur von IntelliSense verwendet werden.

Der {version} oben gezeigte Wildcardabgleich wird verwendet, um automatisch ein jQuery-Bündel mit der entsprechenden Version von jQuery in Ihrem Skriptordner zu erstellen. In diesem Beispiel bietet die Verwendung eines Wildcards die folgenden Vorteile:

Ermöglicht es Ihnen, NuGet zum Aktualisieren auf eine neuere jQuery-Version zu verwenden, ohne den vorherigen Bündelungscode oder jQuery-Verweise in Ihren Ansichtsseiten zu ändern.
Wählt automatisch die Vollversion für Debugkonfigurationen und die Version ".min" für Releasebuilds aus.

Verwenden eines CDN

Der folgende Code ersetzt das lokale jQuery-Bündel durch ein CDN jQuery-Bündel.

public static void RegisterBundles(BundleCollection bundles)
{
    //bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
    //            "~/Scripts/jquery-{version}.js"));

    bundles.UseCdn = true;   //enable CDN support

    //add link to jquery on the CDN
    var jqueryCdnPath = "https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js";

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

    // Code removed for clarity.
}

Im obigen Code wird jQuery vom CDN angefordert, während sich der Releasemodus befindet und die Debugversion von jQuery lokal im Debugmodus abgerufen wird. Wenn Sie ein CDN verwenden, sollten Sie über einen Fallbackmechanismus verfügen, falls die CDN-Anforderung fehlschlägt. Das folgende Markupfragment vom Ende der Layoutdatei zeigt das Skript an, das zum Anfordern von jQuery hinzugefügt wurde, wenn das CDN fehlschlägt.

</footer>

        @Scripts.Render("~/bundles/jquery")

        <script type="text/javascript">
            if (typeof jQuery == 'undefined') {
                var e = document.createElement('script');
                e.src = '@Url.Content("~/Scripts/jquery-1.7.1.js")';
                e.type = 'text/javascript';
                document.getElementsByTagName("head")[0].appendChild(e);

            }
        </script> 

        @RenderSection("scripts", required: false)
    </body>
</html>

Erstellen eines Bündels

Die Bundle-Klassenmethode Include verwendet ein Array von Zeichenfolgen, wobei jede Zeichenfolge ein virtueller Pfad zur Ressource ist. Der folgende Code aus der Methode in der RegisterBundles Datei "App\_Start\BundleConfig.cs" zeigt, wie mehrere Dateien einem Bündel hinzugefügt werden:

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
    "~/Content/themes/base/jquery.ui.core.css",
    "~/Content/themes/base/jquery.ui.resizable.css",
    "~/Content/themes/base/jquery.ui.selectable.css",
    "~/Content/themes/base/jquery.ui.accordion.css",
    "~/Content/themes/base/jquery.ui.autocomplete.css",
    "~/Content/themes/base/jquery.ui.button.css",
    "~/Content/themes/base/jquery.ui.dialog.css",
    "~/Content/themes/base/jquery.ui.slider.css",
    "~/Content/themes/base/jquery.ui.tabs.css",
    "~/Content/themes/base/jquery.ui.datepicker.css",
    "~/Content/themes/base/jquery.ui.progressbar.css",
    "~/Content/themes/base/jquery.ui.theme.css"));

Die Bundle-Klassenmethode IncludeDirectory wird bereitgestellt, um alle Dateien in einem Verzeichnis (und optional alle Unterverzeichnisse) hinzuzufügen, die einem Suchmuster entsprechen. Die Bundle-Klassen-API IncludeDirectory wird unten angezeigt:

public Bundle IncludeDirectory(
    string directoryVirtualPath,  // The Virtual Path for the directory.
    string searchPattern)         // The search pattern.

public Bundle IncludeDirectory(
    string directoryVirtualPath,  // The Virtual Path for the directory.
    string searchPattern,         // The search pattern.
    bool searchSubdirectories)    // true to search subdirectories.

Bündel werden in Ansichten mithilfe der Rendermethode (Styles.Render für CSS und Scripts.Render für JavaScript) referenziert. Das folgende Markup aus der Datei Views\Shared\_Layout.cshtml zeigt, wie die standardmäßigen ASP.NET Internetprojektansichten auf CSS- und JavaScript-Bündel verweisen.

<!DOCTYPE html>
<html lang="en">
<head>
    @* Markup removed for clarity.*@    
    @Styles.Render("~/Content/themes/base/css", "~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    @* Markup removed for clarity.*@
   
   @Scripts.Render("~/bundles/jquery")
   @RenderSection("scripts", required: false)
</body>
</html>

Beachten Sie, dass die Rendermethoden ein Array von Zeichenfolgen verwenden, sodass Sie mehrere Bündel in einer Codezeile hinzufügen können. Im Allgemeinen möchten Sie die Rendermethoden verwenden, die den erforderlichen HTML-Code zum Verweisen auf die Ressource erstellen. Sie können die Url Methode verwenden, um die URL für die Ressource zu generieren, ohne dass das Markup erforderlich ist, um auf die Ressource zu verweisen. Angenommen, Sie wollten das neue asynchrone HTML5-Attribut verwenden. Der folgende Code zeigt, wie sie mithilfe der Url Methode auf modernizr verweisen.

<head>
    @*Markup removed for clarity*@
    <meta charset="utf-8" />
    <title>@ViewBag.Title - MVC 4 B/M</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    @Styles.Render("~/Content/css")

   @* @Scripts.Render("~/bundles/modernizr")*@

    <script src='@Scripts.Url("~/bundles/modernizr")' async> </script>
</head>

Verwenden des "*"-Wildcardzeichens zum Auswählen von Dateien

Der in der Include Methode angegebene virtuelle Pfad und das Suchmuster in der IncludeDirectory Methode können ein "*"-Wildcardzeichen als Präfix oder Suffix im letzten Pfadsegment akzeptieren. Bei der Suchzeichenfolge wird die Groß-/Kleinschreibung nicht beachtet. Die IncludeDirectory Methode hat die Möglichkeit, Unterverzeichnisse zu durchsuchen.

Betrachten Sie ein Projekt mit den folgenden JavaScript-Dateien:

Scripts\Common\AddAltToImg.js
Scripts\Common\ToggleDiv.js
Scripts\Common\ToggleImg.js
Scripts\Common\Sub1\ToggleLinks.js

dir imag

In der folgenden Tabelle sind die Dateien aufgeführt, die einem Bündel mithilfe des Wildcards hinzugefügt wurden, wie gezeigt:

Call	Hinzugefügte oder Ausnahme ausgelöste Dateien
Include("~/Scripts/Common/*.js")	AddAltToImg.js, ToggleDiv.js, ToggleImg.js
Include("~/Scripts/Common/T*.js")	Ungültige Muster-Ausnahme. Das Wildcardzeichen ist nur für das Präfix oder Suffix zulässig.
Include("~/Scripts/Common/og.")	Ungültige Muster-Ausnahme. Es ist nur ein Wildcardzeichen zulässig.
Include("~/Scripts/Common/T*")	ToggleDiv.js, ToggleImg.js
Include("~/Scripts/Common/*")	Ungültige Muster-Ausnahme. Ein reines Wildcardsegment ist ungültig.
IncludeDirectory("~/Scripts/Common", "T*")	ToggleDiv.js, ToggleImg.js
IncludeDirectory("~/Scripts/Common", "T*", true)	ToggleDiv.js, ToggleImg.js, ToggleLinks.js

Das explizite Hinzufügen jeder Datei zu einem Bündel ist in der Regel die bevorzugte Methode für das Laden von Dateien durch Dies aus den folgenden Gründen:

Das Hinzufügen von Skripts durch Wildcards wird standardmäßig in alphabetischer Reihenfolge geladen, was in der Regel nicht ihren Vorstellungen entspricht. CSS- und JavaScript-Dateien müssen häufig in einer bestimmten (nicht alphabetischen) Reihenfolge hinzugefügt werden. Sie können dieses Risiko verringern, indem Sie eine benutzerdefinierte IBundleOrderer-Implementierung hinzufügen, aber das explizite Hinzufügen jeder Datei ist weniger fehleranfällig. So können Sie beispielsweise einem Ordner in Zukunft neue Objekte hinzufügen, die möglicherweise eine Änderung der IBundleOrderer-Implementierung erfordern.
Zeigen Sie bestimmte Dateien an, die einem Verzeichnis hinzugefügt wurden, indem Sie wildcard laden, können in allen Ansichten enthalten sein, die auf dieses Bundle verweisen. Wenn das ansichtsspezifische Skript einem Bundle hinzugefügt wird, erhalten Sie möglicherweise einen JavaScript-Fehler in anderen Ansichten, die auf das Bundle verweisen.
CSS-Dateien, die andere Dateien importieren, führen dazu, dass die importierten Dateien zweimal geladen wurden. Mit dem folgenden Code wird beispielsweise ein Bundle erstellt, bei dem die meisten CSS-Dateien des jQuery UI-Designs zweimal geladen wurden.
```
bundles.Add(new StyleBundle("~/jQueryUI/themes/baseAll")
    .IncludeDirectory("~/Content/themes/base", "*.css"));
```
Die Wildcardauswahl "*.css" enthält jede CSS-Datei im Ordner, einschließlich der Datei "Content\themes\base\jquery.ui.all.css ". Die jquery.ui.all.css Datei importiert andere CSS-Dateien.

Bündelzwischenspeicherung

Bundles legen den HTTP Expires Header ein Jahr ab dem Zeitpunkt der Erstellung des Bundles fest. Wenn Sie zu einer zuvor angezeigten Seite navigieren, zeigt Fiddler an, dass IE keine bedingte Anforderung für das Bundle vornimmt, d. h., es gibt keine HTTP GET-Anforderungen von IE für die Bundles und keine HTTP 304-Antworten vom Server. Sie können erzwingen, dass IE eine bedingte Anforderung für jedes Bundle mit dem F5-Schlüssel (dies führt zu einer HTTP 304-Antwort für jedes Bundle). Sie können eine vollständige Aktualisierung erzwingen, indem Sie ^F5 verwenden (dies führt zu einer HTTP 200-Antwort für jedes Bundle.)

Die folgende Abbildung zeigt die Registerkarte "Zwischenspeichern " des Fiddler-Antwortbereichs:

Fiddler-Zwischenspeicherungsbild

Die Anforderung.
http://localhost/MvcBM_time/bundles/AllMyScripts?v=r0sLDicvP58AIXN_mc3QdyVvVj5euZNzdsa2N1PKvb81
ist für das Bundle AllMyScripts vorgesehen und enthält ein Abfragezeichenfolgenpaar v=r0sLDicvP58AIXN\_mc3QdyVvVj5euZNzdsa2N1PKvb81. Die Abfragezeichenfolge v weist ein Werttoken auf, das ein eindeutiger Bezeichner ist, der zum Zwischenspeichern verwendet wird. Solange sich das Bündel nicht ändert, fordert die ASP.NET Anwendung das AllMyScripts-Bündel mit diesem Token an. Wenn sich eine Datei im Bundle ändert, generiert das ASP.NET Optimierungsframework ein neues Token und garantiert, dass Browseranforderungen für das Bundle das neueste Bundle erhalten.

Wenn Sie die IE9 F12-Entwicklertools ausführen und zu einer zuvor geladenen Seite navigieren, zeigt IE fälschlicherweise bedingte GET-Anforderungen an jedes Bundle und den Server an, der HTTP 304 zurückgibt. Sie können lesen, warum IE9 Probleme hat, festzustellen, ob eine bedingte Anforderung im Blogeintrag "Using CDNs" gestellt wurde und abläuft, um die Websiteleistung zu verbessern.

LESS, CoffeeScript, SCSS, Sass Bundling.

Das Bündelungs- und Minifizierungsframework stellt einen Mechanismus zum Verarbeiten von Zwischensprachen wie SCSS, Sass, LESS oder Coffeescript bereit und wendet Transformationen wie die Minimierung auf das resultierende Bundle an. So fügen Sie ihrem MVC 4-Projekt z. B. weniger Dateien hinzu:

Erstellen Sie einen Ordner für Ihre WENIGER Inhalte. Im folgenden Beispiel wird der Ordner "Content\MyLess " verwendet.
Fügen Sie dem Projekt das .less NuGet-Paket punktlos hinzu.

Fügen Sie eine Klasse hinzu, die die IBundleTransform-Schnittstelle implementiert. Fügen Sie für die .less-Transformation dem Projekt den folgenden Code hinzu.

using System.Web.Optimization;

public class LessTransform : IBundleTransform
{
    public void Process(BundleContext context, BundleResponse response)
    {
        response.Content = dotless.Core.Less.Parse(response.Content);
        response.ContentType = "text/css";
    }
}

Erstellen Sie ein Bündel von LESS-Dateien mit der LessTransform CssMinify-Transformation . Fügen Sie der Methode in der RegisterBundles Datei "App\_Start\BundleConfig.cs " den folgenden Code hinzu.

var lessBundle = new Bundle("~/My/Less").IncludeDirectory("~/My", "*.less");
lessBundle.Transforms.Add(new LessTransform());
lessBundle.Transforms.Add(new CssMinify());
bundles.Add(lessBundle);

Fügen Sie den folgenden Code zu allen Ansichten hinzu, die auf das LESS-Bündel verweisen.
```
@Styles.Render("~/My/Less");
```

Überlegungen zu Bündeln

Eine gute Konvention, die beim Erstellen von Bündeln befolgt werden soll, besteht darin, "Bundle" als Präfix im Bündelnamen einzuschließen. Dadurch wird ein möglicher Routingkonflikt verhindert.

Nachdem Sie eine Datei in einem Bündel aktualisiert haben, wird ein neues Token für den Zeichenfolgenparameter des Bündels generiert, und das vollständige Bündel muss heruntergeladen werden, wenn ein Client das nächste Mal eine Seite mit dem Bundle anfordert. Im herkömmlichen Markup, in dem jedes Objekt einzeln aufgeführt wird, würde nur die geänderte Datei heruntergeladen. Ressourcen, die sich häufig ändern, sind möglicherweise keine guten Kandidaten für die Bündelung.

Durch Bündelung und Minimierung wird in erster Linie die Ladezeit für die Anforderung der ersten Seite verkürzt. Sobald eine Webseite angefordert wurde, speichert der Browser die Objekte (JavaScript, CSS und Bilder) zwischen, sodass Bündelung und Minimierung keine Leistungssteigerung bieten, wenn die gleiche Seite angefordert wird, oder Seiten auf derselben Website, die dieselben Ressourcen anfordern. Wenn Sie den Ablaufheader für Ihre Ressourcen nicht ordnungsgemäß festlegen und keine Bündelung und Minimierung verwenden, markieren die Browser-Aktualitäts heuristiken die Objekte nach einigen Tagen veraltet, und der Browser erfordert eine Überprüfungsanforderung für jede Ressource. In diesem Fall bieten Bündelung und Minimierung eine Leistungssteigerung nach der ersten Seitenanforderung. Ausführliche Informationen finden Sie im Blog "Verwenden von CDNs" und "Expires to Improve Web Performance".

Die Browsereinschränkung von sechs gleichzeitigen Verbindungen pro Hostnamen kann mit einem CDN abgemildert werden. Da das CDN einen anderen Hostnamen als Ihre Hostingwebsite hat, zählen Bestandsanforderungen aus dem CDN nicht für die sechs gleichzeitigen Verbindungen zu Ihrer Hostingumgebung. Ein CDN kann auch allgemeine Vorteile der Zwischenspeicherung von Paketen und Edgezwischenspeicherung bieten.

Bündel sollten von Seiten partitioniert werden, die sie benötigen. Beispielsweise erstellt die standardmäßige ASP.NET MVC-Vorlage für eine Internetanwendung ein jQuery Validation Bundle, das von jQuery getrennt ist. Da die erstellten Standardansichten keine Eingaben haben und keine Werte bereitstellen, enthalten sie nicht das Validierungspaket.

Der System.Web.Optimization Namespace wird in System.Web.Optimization.dll implementiert. Sie nutzt die WebGrease-Bibliothek (WebGrease.dll) für Die Minimierungsfunktionen, die wiederum Antlr3.Runtime.dll verwendet.

Ich verwende Twitter, um schnelle Beiträge zu machen und Links zu teilen. Mein Twitter-Handle ist: @RickAndMSFT

Zusätzliche Ressourcen

Video:Bundling and Optimizing von Howard Dierking
Hinzufügen der Weboptimierung zu einer Webseitenwebsite.
Hinzufügen von Bündelung und Minimierung zu Webformularen.
Leistungsauswirkungen von Bündelung und Minification im Web Browsen von Henrik F Nielsen @frystyk
Verwenden von CDNs und Ablaufen zur Verbesserung der Websiteleistung durch Rick Anderson @RickAndMSFT
Minimieren von RTT (Roundtripzeiten)

Beitragende

Hao Kung
Howard Dierking
Diana LaRose

Freigeben über

Bündelung und Minimierung

Bündelung

Minimierung

Auswirkungen von Bundling und Minification

Debuggen gebündelter und minimierter JavaScript-Code

Steuern von Bündelung und Minifizierung

Verwenden von Bündelung und Minimierung mit ASP.NET Webformularen und Webseiten

Verwenden von Bündelung und Minification mit ASP.NET MVC

Verwenden eines CDN

Erstellen eines Bündels

Verwenden des "*"-Wildcardzeichens zum Auswählen von Dateien

Bündelzwischenspeicherung

LESS, CoffeeScript, SCSS, Sass Bundling.

Überlegungen zu Bündeln

Zusätzliche Ressourcen

Beitragende

Feedback

Zusätzliche Ressourcen