Krav: I tidigare .NET Framework MVC-projekt kan JS och CSS paketeras och komprimeras med Microsofts Microsoft.AspNet.Web.Optimization-bibliotek. Efter att ha använt ASP.NET Core, hur paketerar och komprimerar jag befintliga JS- och CSS-filer?
.NET Framework-projektet refererar till följande:
Exempelkod:
bindande
Buntning kombinerar flera filer till en enda fil. Paketering minskar antalet serverförfrågningar som krävs för att rendera en webbresurs, såsom en webbsida. Du kan skapa så många individuella paket du vill specifikt för CSS, JavaScript och mer. Färre filer betyder från webbläsaren till servern eller från tjänsten som tillhandahåller applikationenFärre HTTP-förfrågningar。 Detta förbättrar startsidans laddningsprestanda.
komprimera
Minify, ta bort onödiga tecken från din kod utan att ändra funktionaliteten. Resultatet blevStorleken på begärda resurser, såsom CSS, bilder och JavaScript-filer, är avsevärt reducerad。 Vanliga bieffekter av minifiering inkluderar att förkorta variabelnamn till en karaktär och att kommentarer och onödiga mellanslag tas bort. Samtidigt kan detFörvirra koden, vilket inte är gynnsamt för andra konkurrenter att läsa vår källkod.
Prestandavinster från paketering och komprimering
Följande tabell visar skillnaderna mellan att ladda tillgångar individuellt och att använda buntning och minifiering:
Det sparar trafik och förbättrar laddningshastigheten när det gäller nätverkstransport, samtidigt som HTTP-förfrågningar minskar och laddningshastigheten förbättras.
För HTTP-förfrågningsheaders är webbläsaren mycket detaljerad. När den paketeras minskar den totala byte-skickade metriken avsevärt. Laddningstiderna visar betydande förbättringar, men detta exempel körs lokalt. Paketering och minifiering kan kombineras med tillgångar som transporteras över nätverket för att uppnå högre prestandaökningar.
ASP.NET Core inte har en egen paketerad och komprimerad lösning, och behöver använda en lösning som tillhandahålls av en tredje part, använder denna artikel "LigerShark.WebOptimizer.Core(Biblioteket ringde till slut.)Förvandla digImplementera hantering av JS och CSS), GitHub-adress:Inloggningen med hyperlänken är synlig.
Skapa först ett nytt projekt ASP.NET Core 6 och kör följande kommando för referens:
Skapa en ny statisk mapp i projektet wwwroot för att lagra test-css- och js-filerna. Skapa en ny CSS- och JS-fil, som visas nedan:
Modifiera Program.cs-filen och lägg till WebOptimizer-tjänsten och middleware, huvudkoden är följande:
När vi försöker starta projektet upptäcker vi att kommentarerna i både CSS- och JS-koden har raderats, filerna har komprimerats, och vissa variabler i JS har reducerats till en enda bokstav, som visas i figuren nedan:
Skapa sedan en ny js-fil från den statiska mappen för att testa bunteringsfunktionen.Paketera test.js och test2.js i en enda common.js fil(och genererar inte en common.js fysisk fil), är konfigurationskoden som följer:
Renderingarna är följande:
Hänvisning:
Inloggningen med hyperlänken är synlig.
Inloggningen med hyperlänken är synlig.
|
Publicerad den 28 februari 2022 20:55:50
|
|
|
|
Hyresvärd|
Publicerad den 28 april 2022 kl. 20:56:47
|
Publicerad den 29-3-2022 00:38:21
|
(Jag vet inte hur man tar bort dubbletter av kommentarer, vänligen ta bort detta inlägg när webbmastern ser det)