Követelmények: Korábbi .NET Framework MVC projektekben a JS, CSS csomagolható és tömöríthető a Microsoft Microsoft.AspNet.Web.Optimization könyvtárával. Miután használtam ASP.NET Core-t, hogyan csomagolhatom és tömörödhetem a meglévő JS és CSS fájlokat?
A .NET Framework projekt a következőkre hivatkozik:
Mintakód:
kötés
A csomagolás több fájlt egyesít egyetlen fájlba. A csomagolás csökkenti a webes eszköz, például egy weboldal megjelenítéséhez szükséges szerverkérések számát. Annyi egyedi csomagot készíthetsz, amennyit csak szeretnél, kifejezetten CSS-hez, JavaScripthez és más dolgokhoz. Kevesebb fájl a böngészőből a szerverre vagy az alkalmazást szolgáltató szolgáltatásra utalKevesebb HTTP kérés。 Ez javítja a kezdőlap betöltési teljesítményét.
összenyom
Minimáld a felesleges karakterek eltávolítását a kódodból anélkül, hogy változtatnád a funkciót. Az eredmény a következő volt.A kért erőforrások, mint például a CSS, képek és JavaScript fájlok mérete jelentősen csökken。 A minimalizálás gyakori mellékhatásai közé tartozik, hogy a változónevek egy karakterre rövidítik, valamint eltávolítják a kommenteket és a felesleges szóközeket. UgyanakkorZavard össze a kódot, ami nem kedvező a többi versenytárs forráskódjának olvasására.
Teljesítményjavulások a csomagolásból és tömörítésből
Az alábbi táblázat mutatja be az eszközök egyedi betöltésének és a csomagolás és minifikáció közötti különbségeket:
Megtakarítja a forgalmat és javítja a betöltési sebességet a hálózati szállítás szempontjából, miközben csökkenti a HTTP kéréseket és javítja a betöltési sebességet.
A HTTP kérés fejlécéinél a böngésző nagyon részletes. Csomagolva a küldött bájtok száma jelentősen csökken. A betöltési idők jelentős javulást mutatnak, de ez a példa helyben fut. A csomagolás és a minifikáció kombinálható a hálózaton keresztül szállított eszközökkel, hogy magasabb teljesítménynövekedést érjenek el.
ASP.NET Core-nak nincs saját csomagolt és tömörített megoldása, és egy harmadik fél által biztosított megoldást kell használnia, a cikk a "LigerShark.WebOptimizer.Core(A könyvtár végül felhívott.)NUglifyImplementáld a JS és CSS kezelést), GitHub cím:A hiperlink bejelentkezés látható.
Először hozz létre egy új projektet a Core 6 ASP.NET és futtasd a következő parancsot, amire hivatkozhatsz:
Hozz létre egy új statikus mappát a wwwroot projektben, ahol tárolhatod a tesztcss és js fájlokat. Hozz létre egy új CSS és JS fájlt, ahogy az alábbiakban látható:
Módosítsuk a Program.cs fájlt, és adjuk hozzá a WebOptimizer szolgáltatást és middleware-t, a fő kód a következő:
Amikor megpróbáljuk elindítani a projektet, azt tapasztaljuk, hogy mind a CSS, mind a JS kód megjegyzései törölve vannak, a fájlokat tömörítették, és néhány JS változót egyetlen betűre csökkentettek, ahogy az alábbi ábrán látható:
Ezután hozz létre egy új js fájlt a statikus mappából, hogy teszteld a csomagolási funkciót.Csomagolj test.js és test2.js egyetlen common.js fájlba(és nem generál common.js fizikai fájlt), a konfigurációs kód a következő:
A képek a következők:
Utalás:
A hiperlink bejelentkezés látható.
A hiperlink bejelentkezés látható.
|
Közzétéve: 2022-3-28 20:55:50
|
|
|
|
Háziúr|
Közzétéve 2022-3-28 20:56:47
|
Közzétéve: 2022-3-29 00:38:21
|
(Nem tudom, hogyan töröljem a duplikált hozzászólásokat, kérlek, töröld ezt a bejegyzést, ha a webmester látja)