Bündelung und Minimierung statischer Ressourcen in ASP.NET Core

Von Scott Addie und David Pine

In diesem Artikel lernen Sie die Vorteile der Funktionen Bündelung und Minimierung sowie ihre Verwendung mit ASP.NET Core-Web-Apps kennen.

Was versteht man unter Bündelung und Minimierung?

Die Bündelung und Minimierung sind zwei Methoden zur Leistungsoptimierung, die Sie unabhängig voneinander in einer Web-App anwenden können. Zusammengenommen führen diese Funktionen zu einer Leistungssteigerung, indem die Anzahl der Serveranforderungen sowie die Größe der angeforderten statischen Ressourcen reduziert werden.

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, werden die statischen Ressourcen (JavaScript, CSS und Bilder) vom Browser zwischengespeichert. Die Bündelung und Minimierung haben daher keine Auswirkungen auf die Leistung, wenn dieselbe Seite (oder Seiten) auf derselben Website angefordert wird, die ihrerseits dieselben Ressourcen anfordert. Wenn der Expires-Header nicht korrekt für die Assets festgelegt ist und wenn keine Bündelung und Minimierung verwendet wird, markiert die Aktualitätsheuristiken des Browsers die Assets nach einigen Tagen als veraltet. Zusätzlich benötigt der Browser für jede Ressource eine Überprüfungsanforderung. In solchen Fällen führt die Bündelung und Minimierung auch nach der Anforderung der ersten Seite zu einer Leistungsverbesserung.

Bündelung

Bei der Bündelung werden mehrere Dateien zu einer einzelnen Datei kombiniert. Durch die Bündelung wird die zum Rendern einer Webressource, z. B. einer Webseite, erforderliche Anzahl von Serveranforderungen reduziert. Sie können beliebig viele Einzelbündel erstellen, insbesondere für CSS, JavaScript usw. Je kleiner die Anzahl von Dateien, desto weniger HTTP-Anforderungen müssen zwischen Browser und Server oder vom Dienst verarbeitet werden, der Ihre Anwendung bereitstellt. Dadurch kann die Leistung des Ladevorgangs der ersten Seite gesteigert werden.

Minimierung

Bei der Minimierung werden unnötige Zeichen aus dem Code entfernt, ohne dass die Funktionalität geändert wird. Dadurch lässt sich die Größe der angeforderten Ressourcen (wie CSS, Bilder oder JavaScript-Dateien) deutlich reduzieren. Häufiger Nebeneffekt einer Minimierung sind auf ein Zeichen verkürzte Variablennamen und entfernte Kommentare und Leerzeichen.

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/, ''));
}

Durch Minimierung kann die Funktion auf folgenden Code verkürzt werden:

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

Zusätzlich zur Entfernung von Kommentaren und unnötigen Leerzeichen werden die folgenden Parameter und Variablennamen folgendermaßen umbenannt:

Ursprünglich	Umbenannt
imageTagAndImageID	t
imageContext	a
imageElement	r

Auswirkungen der Bündelung und Minimierung

In der folgenden Tabelle werden die Unterschiede bei den Ladezeiten für einzelne Ressourcen mit und ohne Bündelung und Minimierung für eine typische Web-App veranschaulicht:

Aktion	Ohne B/M	Mit B/M	Reduzierung
Dateianforderungen	18	7	61 %
Übertragene Bytes (KB)	265	156	41 %
Ladezeit (ms)	2360	885	63 %

Die Ladezeit wurde verbessert, aber dieses Beispiel wurde lokal ausgeführt. Bei einer Übertragung der Ressourcen über ein Netzwerk können durch Bündelung und Minimierung noch größere Leistungssteigerungen erzielt werden.

Die Test-App, die zum Generieren der Zahlen in der vorherigen Tabelle verwendet wird, zeigt typische Verbesserungen, die möglicherweise nicht auf eine bestimmte App zutreffen. Es wird empfohlen, eine App zu testen, um festzustellen, ob Bündelung und Minimierung zu einer verbesserten Ladezeit führen.

Auswählen einer Bündelungs- und Minimierungsstrategie

ASP.NET Core ist mit WebOptimizer kompatibel, einer Open-Source-Bündelungs- und Minimierungslösung. Informationen zur Einrichtung und Beispielprojekte finden Sie unter WebOptimizer. ASP.NET Core bietet keine native Bündelungs- und Minimierungslösung.

Drittanbietertools wie Gulp und Webpack bieten Workflowautomatisierung für Bündelung und Minimierung sowie Linting und Imageoptimierung. Bei der Bündelung und Minimierung werden die minimierten Dateien vor Bereitstellung der App erstellt. Werden die Bündelung und Minimierung vor der Bereitstellung durchgeführt, kann die Serverauslastung reduziert werden. Beachten Sie jedoch, dass eine Bündelung und Minimierung die Komplexität des Builds erhöhen und auch nur mit statischen Dateien ausgeführt werden können.

Umgebungsbasierte Bündelung und Minimierung

Als bewährte Methode wird empfohlen, die gebündelten und minimierten Dateien Ihrer App in einer Produktionsumgebung zu verwenden. Während der Entwicklung wird das Debuggen der App durch die Originaldateien erleichtert.

Geben Sie mithilfe des Umgebungstaghilfsprogramms in Ihren Ansichten die Dateien an, die in Ihre Seiten einbezogen werden sollen. Das Umgebungstaghilfsprogramm rendert die Inhalte nur, wenn es in bestimmten Umgebungen ausgeführt wird.

Das folgende environment-Tag rendert die nicht verarbeiteten CSS-Dateien bei der Ausführung in einer Development-Umgebung:

<environment include="Development">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</environment>

Das folgende environment-Tag rendert die gebündelten und minimierten CSS-Dateien nur bei der Ausführung in einer Umgebung, die keine Development-Umgebung darstellt. Die Ausführung in einer Production- oder Staging-Umgebung löst beispielsweise das Rendern der folgenden Stylesheets aus:

<environment exclude="Development">
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
    <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>

Zusätzliche Ressourcen

• Verwenden mehrerer Umgebungen
• Taghilfsprogramme