Bündelung und Minimierung

  • Artikel

von Rick Anderson

Bündelung und Minifizierung sind zwei Techniken, die Sie in ASP.NET 4.5 verwenden können, um die Ladezeit von Anforderungen zu verbessern. Bündelung und Minimierung verbessert 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 gleichzeitiger Verbindungen pro Hostnamen auf sechs. Das bedeutet, dass während der Verarbeitung von sechs Anforderungen zusätzliche Anforderungen für Ressourcen auf einem Host vom Browser in die Warteschlange gestellt werden. In der folgenden Abbildung zeigen die Netzwerkregisterkarten für IE F12-Entwicklertools den Zeitpunkt für Ressourcen an, die für die Infoansicht einer Beispielanwendung erforderlich sind.

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, die zum Senden der Anforderung und zum Empfangen der ersten Antwort vom Server erforderlich ist. Die blauen Balken zeigen die Zeit an, die zum Empfangen der Antwortdaten vom Server gedauert hat. Sie können auf ein Objekt doppelklicken, um detaillierte Zeitinformationen zu erhalten. Die folgende Abbildung zeigt beispielsweise die Zeitsteuerungsdetails zum Laden der Datei /Scripts/MyScripts/JavaScript6.js .

Screenshot: Netzwerkregisterkarte

Die obige Abbildung zeigt das Startereignis , das die Zeit angibt, zu der die Anforderung in die Warteschlange gestellt wurde, weil der Browser die Anzahl gleichzeitiger Verbindungen begrenzt hat. In diesem Fall wurde die Anforderung 46 Millisekunden lang in die Warteschlange gestellt und wartete auf den Abschluss einer weiteren Anforderung.

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 vereinfacht. Sie können CSS, JavaScript und andere Bundles erstellen. Weniger Dateien bedeuten weniger HTTP-Anforderungen und können die Ladeleistung der ersten Seite verbessern.

Die folgende Abbildung zeigt dieselbe Zeitsteuerungsansicht der Zuvor gezeigten Infoansicht, diesmal jedoch mit aktivierter Bündelung und Minimierung.

Screenshot: Registerkarte

Minimierung

Die Minifizierung 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ötiger Leerzeichen wurden die folgenden Parameter und Variablennamen wie folgt umbenannt (gekürzt):

Original Umbenannt
imageTagAndImageID n
imageContext t
imageElement i

Auswirkungen von Bündelung und Minimierung

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

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

Die gesendeten Bytes weisen eine erhebliche Verringerung bei der Bündelung auf, da Browser mit den HTTP-Headern, die sie auf Anforderungen anwenden, ziemlich ausführlich sind. Die Reduzierung der empfangenen Bytes ist nicht so groß, da die größten Dateien (Scripts\jquery-ui-1.8.11.min.js und Scripts\jquery-1.7.1.min.js) bereits verkleinert sind. Hinweis: Für die Zeitsteuerungen im Beispielprogramm wurde das Fiddler-Tool verwendet, um ein langsames Netzwerk zu simulieren. (Wählen Sie im Menü Fiddlerregeln die Option Leistung und dann Modemgeschwindigkeiten simulieren aus.)

Debuggen von gebündeltem und minimiertem JavaScript

Es ist einfach, Ihr JavaScript in einer Entwicklungsumgebung zu debuggen (in der das Kompilierungselement in der Web.config-Datei auf debug="true" festgelegt ist), da die JavaScript-Dateien nicht gebündelt oder minimiert werden. Sie können auch einen Releasebuild debuggen, bei 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, mit dem folgenden Ansatz:

  1. Wählen Sie die Registerkarte Skript und dann die Schaltfläche Debuggen starten aus.
  2. Wählen Sie das Bundle aus, das die JavaScript-Funktion enthält, die Sie mithilfe der Schaltfläche assets debuggen möchten.
    Screenshot: Registerkarte
  3. Formatieren Sie das verknemte JavaScript, indem Sie die Schaltfläche "Konfiguration" auswählen, die das Schaltflächensymbol , und dann JavaScript formatieren auswählen.
  4. 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.
    Screenshot: Registerkarte

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 Minimierung

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

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

Um die Bündelung und Minimierung zu aktivieren, legen Sie den debug Wert auf "false" fest. Sie können die einstellungWeb.config mit der EnableOptimizations -Eigenschaft für die BundleTable -Klasse überschreiben. Der folgende Code ermöglicht die Bündelung und Minimierung und überschreibt jede Einstellung in der Web.config-Datei .

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

Es sei dennEnableOptimizations, das Debug-Attribut im Kompilierungselement in der Web.config Datei ist auf falsefestgelegt, werden Dateien nicht gebündelt oder minimiert.true Darüber hinaus wird die MIN-Version von Dateien nicht verwendet, und die vollständigen Debugversionen werden ausgewählt. EnableOptimizationsÜberschreibt das Debug-Attribut im Kompilierungselement in der Web.config-Datei

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

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

In diesem Abschnitt erstellen wir ein ASP.NET MVC-Projekt, um die Bündelung und Minimierung 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 untersuchen Sie die RegisterBundles Methode, die zum Erstellen, Registrieren und Konfigurieren von Bundles 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 vorherige Code erstellt ein neues JavaScript-Bündel mit dem Namen ~/bundles/jquery, das alle entsprechenden Enthält (d. h. debuggen oder verknemert, aber nicht .vsdoc) Dateien im Ordner Skripts, die mit der Karte Zeichenfolge "~/Scripts/jquery-{version}.js" übereinstimmen. Für ASP.NET MVC 4 bedeutet dies, dass bei einer Debugkonfiguration die Dateijquery-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 gängigen Konventionen wie:

  • Auswählen der ".min"-Datei für die Freigabe, wennFileX.min.jsund 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.

Die {version} oben gezeigte wild Karte übereinstimmung wird verwendet, um automatisch ein jQuery-Bundle mit der entsprechenden Version von jQuery in Ihrem Skriptordner zu erstellen. In diesem Beispiel bietet die Verwendung eines wilden Karte die folgenden Vorteile:

  • Ermöglicht Ihnen die Verwendung von NuGet, um auf eine neuere jQuery-Version zu aktualisieren, ohne den vorherigen Bündelungscode oder jQuery-Verweise auf Ihren Ansichtsseiten zu ändern.
  • Wählt automatisch die Vollversion für Debugkonfigurationen und die ".min"-Version für Releasebuilds aus.

Verwenden eines CDN

Der folgende Code ersetzt das lokale jQuery-Bundle durch ein CDN-jQuery-Bundle.

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 im Releasemodus vom CDN angefordert, und die Debugversion von jQuery wird lokal im Debugmodus abgerufen. Wenn Sie ein CDN verwenden, sollten Sie über einen Fallbackmechanismus verfügen, falls die CDN-Anforderung fehlschlägt. Das folgende Markupfragment am Ende der Layoutdatei zeigt das Skript, das zum Anfordern von jQuery hinzugefügt wurde, falls 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 Bundles

Die Bundle-KlassenmethodeInclude verwendet ein Array von Zeichenfolgen, wobei jede Zeichenfolge ein virtueller Pfad zur Ressource ist. Der folgende Code aus der RegisterBundles -Methode in der Datei App\_Start\BundleConfig.cs zeigt, wie einem Paket mehrere Dateien 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-KlassenmethodeIncludeDirectory wird bereitgestellt, um alle Dateien in einem Verzeichnis (und optional alle Unterverzeichnisse) hinzuzufügen, die einem Suchmuster entsprechen. Die Bündelklassen-APIIncludeDirectory wird unten gezeigt:

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.

Auf Bundles wird in Ansichten mit der Render-Methode (Styles.Render für CSS und Scripts.Render JavaScript) verwiesen. Das folgende Markup aus der Datei Views\Shared\_Layout.cshtml zeigt, wie die Standard-ASP.NET Internetprojektansichten auf CSS- und JavaScript-Bundles 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 Render-Methoden ein Array von Zeichenfolgen verwenden, sodass Sie mehrere Bündel in einer Codezeile hinzufügen können. In der Regel sollten Sie die Render-Methoden verwenden, die den erforderlichen HTML-Code erstellen, um auf das Medienobjekt zu verweisen. Sie können die Url -Methode verwenden, um die URL für das Medienobjekt zu generieren, ohne dass das Markup erforderlich ist, um auf das Medienobjekt zu verweisen. Angenommen, Sie möchten 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 *"-Platzhalterzeichen als Präfix oder Suffix für 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 Bundle mithilfe des Wildcards hinzugefügt wurden:

Call Hinzugefügte Dateien oder ausgelöste Ausnahmen
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 aus den folgenden Gründen im Allgemeinen der bevorzugte Wert für das Laden von Dateien mit Wildcards:

  • Das Hinzufügen von Skripts per Wildcard wird standardmäßig in alphabetischer Reihenfolge geladen. Dies ist in der Regel nicht das, was Sie möchten. CSS- und JavaScript-Dateien müssen häufig in einer bestimmten (nicht alphabetischen) Reihenfolge hinzugefügt werden. Sie können dieses Risiko minimieren, indem Sie eine benutzerdefinierte IBundleOrderer-Implementierung hinzufügen, aber das explizite Hinzufügen jeder Datei ist weniger fehleranfällig. Beispielsweise können Sie einem Ordner in Zukunft neue Ressourcen hinzufügen, sodass Sie möglicherweise Ihre IBundleOrderer-Implementierung ändern müssen.

  • Anzeigen bestimmter Dateien, die einem Verzeichnis mithilfe von wilden Karte Laden hinzugefügt wurden, 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 für andere Ansichten, die auf das Bundle verweisen.

  • CSS-Dateien, die andere Dateien importieren, führen dazu, dass die importierten Dateien zweimal geladen werden. Der folgende Code erstellt beispielsweise ein Bündel mit den meisten CSS-Dateien des jQuery UI-Designs, die zweimal geladen werden.

    bundles.Add(new StyleBundle("~/jQueryUI/themes/baseAll")
    .IncludeDirectory("~/Content/themes/base", "*.css"));

    Die wild Karte Auswahl "*.css" enthält jede CSS-Datei im Ordner, einschließlich der Datei Content\themes\base\jquery.ui.all.css. Die Datei jquery.ui.all.css importiert andere CSS-Dateien.

Zwischenspeichern von Paketen

Bundles legen den HTTP Expires-Header ein Jahr nach 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 sendet, 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 der F5-Taste sendet (was zu einer HTTP 304-Antwort für jedes Bundle führt). Sie können eine vollständige Aktualisierung erzwingen, indem Sie ^F5 verwenden (was zu einer HTTP 200-Antwort für jedes Bundle führt).

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 und enthält ein Abfragezeichenfolgenpaar v=r0sLDicvP58AIXN\_mc3QdyVvVj5euZNzdsa2N1PKvb81. Die Abfragezeichenfolge v verfügt über ein Werttoken, bei dem es sich um einen eindeutigen Bezeichner handelt, der für die Zwischenspeicherung verwendet wird. Solange sich das Bundle nicht ändert, fordert die anwendung ASP.NET das AllMyScripts-Paket mithilfe dieses Tokens an. Wenn sich eine Datei im Bundle ändert, generiert das ASP.NET-Optimierungsframework ein neues Token, um sicherzustellen, dass Browseranforderungen für das Bundle das neueste Paket 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. Warum IE9 Probleme hat, zu ermitteln, ob eine bedingte Anforderung gestellt wurde, finden Sie im Blogeintrag Using CDNs and Expires to Improve Web Site Performance (Verwenden von CDNs und Ablauf zur Verbesserung der Websiteleistung).

LESS, CoffeeScript, SCSS, Sass Bundling.

Das Bündelungs- und Minimierungsframework stellt einen Mechanismus bereit, um Zwischensprachen wie SCSS, Sass, LESS oder Coffeescript zu verarbeiten und Transformationen wie die Minimierung auf das resultierende Paket anzuwenden. So fügen Sie ihrem MVC 4-Projekt beispielsweise .less-Dateien hinzu:

  1. Erstellen Sie einen Ordner für Ihre LESS-Inhalte. Im folgenden Beispiel wird der Ordner Content\MyLess verwendet.

  2. Fügen Sie ihrem Projekt das NuGet-Paket ".less" hinzu.
    Punktlose NuGet-Installation

  3. 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";
    }
}

  4. Erstellen Sie ein Bündel von LESS-Dateien mit und LessTransform der 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);

  5. Fügen Sie allen Ansichten, die auf das LESS-Paket verweisen, den folgenden Code hinzu.

    @Styles.Render("~/My/Less");

Überlegungen zu Bundles

Eine gute Konvention, die beim Erstellen von Bundles befolgt werden sollte, besteht darin, "bundle" als Präfix in den Bundlenamen einzufügen. Dadurch wird ein möglicher Routingkonflikt verhindert.

Nachdem Sie eine Datei in einem Bündel aktualisiert haben, wird ein neues Token für den Parameter der Bundle-Abfragezeichenfolge generiert, und das vollständige Paket muss heruntergeladen werden, wenn ein Client das nächste Mal eine Seite anfordert, die das Paket enthält. Im herkömmlichen Markup, in dem jedes Objekt einzeln aufgeführt wird, wird 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. Nachdem eine Webseite angefordert wurde, speichert der Browser die Ressourcen (JavaScript, CSS und Bilder) zwischen, sodass die Bündelung und Minimierung keine Leistungssteigerung beim Anfordern derselben Seite oder von Seiten auf derselben Website bietet, die dieselben Ressourcen anfordern. Wenn Sie den Ablaufzeitheader für Ihre Ressourcen nicht ordnungsgemäß festlegen und keine Bündelung und Minimierung verwenden, markiert die Aktualitätsheuristik des Browsers die Objekte nach einigen Tagen als veraltet, und der Browser erfordert eine Überprüfungsanforderung für jedes Medienobjekt. In diesem Fall sorgen Bündelung und Minimierung für eine Leistungssteigerung nach der ersten Seitenanforderung. Ausführliche Informationen finden Sie im Blog Using CDNs and Expires to Improve Web Site Performance .For details, see the blog Using CDNs and Expires to Improve Web Site Performance.

Die Browserbeschränkung von sechs gleichzeitigen Verbindungen pro Hostnamen kann mithilfe eines CDNs entschärft werden. Da das CDN über einen anderen Hostnamen als Ihre Hostingwebsite verfügt, werden Ressourcenanforderungen vom CDN nicht auf den Grenzwert für sechs gleichzeitige Verbindungen mit Ihrer Hostingumgebung angerechnet. Ein CDN kann auch allgemeine Vorteile von Paketzwischenspeicherung und Edgezwischenspeicherung bieten.

Bundles sollten nach Seiten partitioniert werden, die sie benötigen. Beispielsweise erstellt die standardbasierte ASP.NET MVC-Vorlage für eine Internetanwendung ein jQuery-Validierungspaket, das von jQuery getrennt ist. Da die erstellten Standardansichten keine Eingaben und keine Postwerte enthalten, enthalten sie das Validierungspaket nicht.

Der System.Web.Optimization Namespace wird in System.Web.Optimization.dllimplementiert. Es nutzt die WebGrease-Bibliothek (WebGrease.dll) für Minimierungsfunktionen, die wiederum Antlr3.Runtime.dllverwendet.

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

Zusätzliche Ressourcen

Beitragende