Anforderungen: In früheren .NET Framework MVC-Projekten können JS und CSS mit Microsofts Microsofts Microsoft.AspNet.Web.Optimization-Bibliothek gebündelt und komprimiert werden. Wie kann ich nach der Nutzung ASP.NET Core bestehende JS- und CSS-Dateien bündeln und komprimieren?
Das .NET Framework-Projekt bezieht sich auf Folgendes:
Beispielcode:
verbindlich
Bündeln kombiniert mehrere Dateien zu einer einzigen Datei. Bündelung reduziert die Anzahl der Serveranfragen, die zum Rendern eines Webassets wie einer Webseite erforderlich sind. Du kannst so viele einzelne Bundles erstellen, wie du möchtest, speziell für CSS, JavaScript und mehr. Weniger Dateien kommen vom Browser zum Server oder vom Dienst, der die Anwendung bereitstellt,Weniger HTTP-Anfragen。 Das verbessert die Ladeleistung der Homepage.
komprimieren
Minify, unnötige Zeichen aus deinem Code zu entfernen, ohne die Funktionalität zu ändern. Das Ergebnis warDie Größe der angeforderten Ressourcen wie CSS, Bilder und JavaScript-Dateien ist deutlich reduziert。 Häufige Nebenwirkungen der Minifikation sind die Verkürzung von Variablennamen auf ein Zeichen sowie das Entfernen von Kommentaren und unnötigen Leerzeichen. Gleichzeitig kann esVerwirre den Code, was für andere Konkurrenten, die unseren Quellcode lesen, nicht förderlich ist.
Leistungsgewinne durch Bündelung und Kompression
Die folgende Tabelle zeigt die Unterschiede zwischen dem individuellen Laden von Vermögenswerten und der Verwendung von Bündelung und Minifikation:
Es spart Verkehr und verbessert die Ladegeschwindigkeit im Hinblick auf den Netzwerktransport, reduziert zudem HTTP-Anfragen und verbessert die Ladegeschwindigkeit.
Für HTTP-Anfrage-Header ist der Browser sehr detailliert. Bei Bündeln reduziert sich die Gesamtzahl der gesendeten Bytes erheblich. Die Ladezeiten zeigen deutliche Verbesserungen, aber dieses Beispiel läuft lokal. Bündelung und Minifikation können mit Assets kombiniert werden, die über das Netzwerk transportiert werden, um höhere Leistungsgewinne zu erzielen.
ASP.NET Core keine eigene gebündelte und komprimierte Lösung hat und eine Lösung eines Drittanbieters verwenden muss, verwendet dieser Artikel "LigerShark.WebOptimizer.Core(Die Bibliothek rief schließlich an.)NUglifyJS- und CSS-Handling implementieren), GitHub-Adresse:Der Hyperlink-Login ist sichtbar.
Zuerst erstelle ein neues Projekt ASP.NET Core 6 und führe folgenden Befehl zur Referenz aus:
Erstelle einen neuen statischen Ordner im Projekt wwwroot, um die Test-CSS- und JS-Dateien zu speichern. Erstellen Sie eine neue CSS- und JS-Datei, wie unten gezeigt:
Ändern Sie die Program.cs-Datei und fügen Sie den WebOptimizer-Service und die Middleware hinzu, der Hauptcode ist wie folgt:
Wenn wir versuchen, das Projekt zu starten, stellen wir fest, dass die Kommentare sowohl des CSS- als auch des JS-Codes gelöscht wurden, die Dateien komprimiert und einige Variablen in JS auf einen einzigen Buchstaben reduziert wurden, wie in der Abbildung unten gezeigt:
Dann erstelle eine neue JS-Datei aus dem statischen Ordner, um die Bündelfunktion zu testen.Bündeln test.js und test2.js in einer einzigen common.js-Datei(und erzeugt keine common.js physische Datei), lautet der Konfigurationscode wie folgt:
Die Darstellungen sind wie folgt:
Referenz:
Der Hyperlink-Login ist sichtbar.
Der Hyperlink-Login ist sichtbar.
|
Veröffentlicht am 28.03.2022, 20:55:50
|
|
|
|
Vermieter|
Veröffentlicht am 28.03.2022, 20:56:47
|
Veröffentlicht am 29.3.2022, 00:38:21
|
(Ich weiß nicht, wie man doppelte Kommentare löscht, bitte löschen Sie diesen Beitrag, sobald der Webmaster ihn sieht.)