Vereisten: In eerdere .NET Framework MVC-projecten kunnen JS en CSS worden gebundeld en gecomprimeerd met behulp van Microsoft's Microsoft.AspNet.Web.Optimization-bibliotheek. Hoe bundel en commis ik na het gebruik van ASP.NET Core bestaande JS- en CSS-bestanden?
Het .NET Framework-project verwijst naar het volgende:
Voorbeeldcode:
bindend
Bundelen combineert meerdere bestanden tot één bestand. Bundelen vermindert het aantal serververzoeken dat nodig is om een webasset te renderen, zoals een webpagina. Je kunt zoveel individuele bundels maken als je wilt, specifiek voor CSS, JavaScript en meer. Minder bestanden betekenen van de browser naar de server of van de dienst die de applicatie levertMinder HTTP-verzoeken。 Dit verbetert de laadprestaties van de startpagina.
comprimeren
Minify verwijder onnodige tekens uit je code zonder de functionaliteit te veranderen. Het resultaat wasDe grootte van de gevraagde bronnen, zoals CSS, afbeeldingen en JavaScript-bestanden, is aanzienlijk verminderd。 Veelvoorkomende bijwerkingen van minificatie zijn het verkorten van variabelenamen tot één teken en het verwijderen van opmerkingen en onnodige spaties (spaces). Tegelijkertijd kan hetVerwarring de code, wat niet bevorderlijk is voor andere concurrenten om onze broncode te lezen.
Prestatiewinst door bundelen en compressie
De volgende tabel geeft de verschillen weer tussen het afzonderlijk laden van assets en het gebruik van bundeling en minificatie:
Het bespaart verkeer en verbetert de laadsnelheid qua netwerktransport, terwijl het ook HTTP-verzoeken vermindert en de laadsnelheid verbetert.
Voor HTTP-verzoekheaders is de browser zeer gedetailleerd. Wanneer gebundeld, wordt de totale byte-gestuurde metriek aanzienlijk verminderd. De laadtijden laten aanzienlijke verbeteringen zien, maar dit voorbeeld draait lokaal. Bundeling en minificatie kunnen worden gecombineerd met activa die over het netwerk worden vervoerd om hogere prestatiewinsten te behalen.
ASP.NET Core geen eigen gebundelde en gecomprimeerde oplossing heeft en een oplossing van een derde partij moet gebruiken, gebruikt dit artikel "LigerShark.WebOptimizer.Core(De bibliotheek belde uiteindelijk.)NuancerenImplementeer JS- en CSS-afhandeling), GitHub-adres:De hyperlink-login is zichtbaar.
Maak eerst een nieuw project aan ASP.NET Core 6 en voer het volgende commando uit om naar te verwijzen:
Maak een nieuwe statische map aan in het project wwwroot om de test css- en js-bestanden op te slaan. Maak een nieuw CSS- en JS-bestand aan, zoals hieronder weergegeven:
Pas het Program.cs-bestand aan en voeg de WebOptimizer-service en middleware toe; de hoofdcode is als volgt:
Wanneer we proberen het project te starten, zien we dat de opmerkingen van zowel CSS- als JS-code zijn verwijderd, de bestanden zijn gecomprimeerd, en sommige variabelen in JS zijn teruggebracht tot één letter, zoals te zien is in de onderstaande figuur:
Maak vervolgens een nieuw js-bestand aan vanuit de statische map om de bundelfunctie te testen.Bundel test.js en test2.js in één common.js bestand(en genereert geen common.js fysiek bestand), is de configuratiecode als volgt:
De renderings zijn als volgt:
Referentie:
De hyperlink-login is zichtbaar.
De hyperlink-login is zichtbaar.
|
Geplaatst op 28-3-2022 20:55:50
|
|
|
|
Huisbaas|
Geplaatst op 28-3-2022 20:56:47
|
Geplaatst op 29-3-2022 00:38:21
|
(Ik weet niet hoe ik dubbele reacties kan verwijderen, verwijder dit bericht alsjeblieft als de webmaster het ziet)