ASP.NET Core (XII) Spájanie JS, CSS a kompresia

jslag · 发表于 2022-3-28 20:55:50

Požiadavka: V predchádzajúcich projektoch .NET Framework MVC sa JS a CSS mohli spájať a komprimovať pomocou knižnice tried Microsoft.AspNet.Web.Optimization. Ako môžem zväzovať a komprimovať existujúce súbory JS a CSS pri používaní ASP.NET Core?

NET Framework projektu je uvedený odkaz nižšie:

Prihláste sa na zobrazenie.

Ukážka kódu:

Prihlásenie viditeľné.

Balík

Bundlovanie spája viacero súborov do jedného súboru. Zväzky znižujú počet požiadaviek na server potrebných na vykreslenie webových prostriedkov, napríklad stránok. Môžete vytvoriť ľubovoľný počet jednotlivých zväzkov špeciálne pre CSS, JavaScript atď. Menej súborov znamená menej požiadaviek HTTP od prehliadača na server alebo od služby, ktorá aplikáciu poskytuje. Tým sa zlepšuje výkon načítavania domovskej stránky.

Kompresia

Zmenšovanie odstraňuje z kódu nepotrebné znaky bez zmeny funkčnosti. Výsledkom je výrazné zníženie veľkosti požadovaných zdrojov, ako sú súbory CSS, obrázky a JavaScript. Medzi bežné vedľajšie účinky zmenšovania patrí skrátenie názvov premenných na jeden znak a odstránenie komentárov a zbytočných medzier. Taktiež trochu zahmlieva kód a odrádza ostatných konkurentov od čítania nášho zdrojového kódu.

Zvýšenie výkonu vďaka spájaniu a kompresii

V nasledujúcej tabuľke sú uvedené rozdiely medzi individuálnym načítaním aktív a použitím zväzkovania a zmenšovania:

Šetrí prevádzku z hľadiska sieťového prenosu a zvyšuje rýchlosť načítania a tiež znižuje počet požiadaviek HTTP, čo tiež zlepší rýchlosť načítania.

V prípade hlavičiek požiadaviek HTTP sú prehliadače veľmi podrobné. Metriky celkového počtu odoslaných bajtov sa pri spájaní výrazne znížia. Časy načítania vykazujú výrazné zlepšenie, ale tento príklad beží lokálne. Vyšší nárast výkonu možno dosiahnuť, keď sa zväzkovanie a zmenšovanie používa v spojení s aktívami prenášanými cez sieť.

ASP.NET Core sa nedodáva s riešením na zväzkovanie a kompresiu a vyžaduje si použitie riešenia tretej strany, v tomto prípade "LigerShark.WebOptimizer.Core" (ktoré nakoniec volá NUglify na spracovanie JS a CSS). WebOptimizer.Core" (knižnica v konečnom dôsledku volá NUglify na spracovanie JS a CSS), adresa GitHub: https: //github.com/ligershark/WebOptimizer

Najprv vytvorte nový projekt ASP.NET Core 6, vykonajte nasledujúci odkaz na príkaz:

Prihláste sa, aby ste ho videli.

Vytvorte nový statický priečinok v projekte wwwroot, do ktorého uložíte testovacie súbory css a js. Vytvorte nový súbor css a js, ako je uvedené nižšie:

Upravte súbor Program.cs, aby ste pridali službu WebOptimizer a middleware, hlavný kód je nasledujúci:

Prihláste sa, aby ste videli.

Skúste spustiť projekt, zistili sme, že komentáre kódu css a js boli odstránené, súbor bol tiež komprimovaný, v ktorom, niektoré premenné v js boli zredukované na jedno písmeno, ako je uvedené nižšie:

A potom zo statického priečinka vytvoriť nový js súbor, testovacie zväzkové funkcie, bude test.js a test2.js zväzok do súboru common.js (a nebude generovať fyzický súbor common.js), konfiguračný kód je nasledujúci:

Prihláste sa, aby ste videli.

Výsledok je nasledujúci:

Reference:

h ttps:// docs.microsoft.com/zh-cn/aspnet/core/client-side/bundling-and-minification?view=aspnetcore-6.0
h ttps:// github.com/ligershark/WebOptimizer

dresy · 发表于 2022-3-28 20:56:47

Rekapitulácia:

ASP.NET Core (XI) Smerovanie koncových bodov Pridať Middleware Zobraziť všetky služby DI
h ttps:// www.itsvse.com/thread-10269-1-1.html

Vysvetlenie priorít konfigurácie ASP.NET Core (x)
h ttps:// www.itsvse.com/thread-10265-1-1.html

ASP.NET Core (IX) Middleware Podrobnosti o middleware
h ttps:// www.itsvse.com/thread-9647-1-1.html

Podrobne vysvetlený middleware ASP.NET Core (Middleware)
h ttps:// www.itsvse.com/thread-8126-1-1.html

ASP.NET Core (VIII) - Jama s predvoleným parametrom používateľského rozhrania Swagger
h ttps:// www.itsvse.com/thread-9640-1-1.html

ASP.NET Core (VII) - Hlboký ponor do zdrojového kódu rámca
h ttps:// www.itsvse.com/thread-9601-1-1.html

ASP.NET Core (VI) DI Ručné získavanie injektovaných objektov
h ttps:// www.itsvse.com/thread-9595-1-1.html

ASP.NET Core (V) Distribuované transakcie založené na CAP
h ttps:// www.itsvse.com/thread-9593-1-1.html

ASP.NET Core (IV) filtrovanie zjednoteného modelu ModelState validácia
h ttps:// www.itsvse.com/thread-9589-1-1.html

ASP.NET Core (III) Používanie ActivatorUtilities na dynamické vytváranie inštancií
h ttps:// www.itsvse.com/thread-9488-1-1.html

ASP.NET Core (II) Samospúšťanie aplikácií prostredníctvom kódu
h ttps:// www.itsvse.com/thread-9480-1-1.html

ASP.NET Core (I) Používanie vyrovnávacej pamäte Redis
h ttps:// www.itsvse.com/thread-9393-1-1.html

mi · 发表于 2022-3-29 00:38:21

Nie som si istý, či to budem môcť urobiť.

johnyoung · 发表于 2022-4-6 12:02:33

Ligershark.WebOptimizer.Core a WebMarkupMin.AspNetCore6 boli vyskúšané.

Jimmy choo choo · 发表于 2022-4-6 13:45:12

johnyoung Publikované dňa 2022-4-6 12:02
Ligershark.WebOptimizer.Core a WebMarkupMin.AspNetCore6 boli vyskúšané!

Ktorý z nich je lepší?

johnyoung · 发表于 2022-4-6 14:53:12

Naposledy upravil johnyoung dňa 2022-4-6 14:56

(Neviem, ako vymazať zverejnenie duplicitných komentárov, webmaster pozri, prosím, vymažte to)

johnyoung · 发表于 2022-4-6 14:54:11

Vložil little scum dňa 2022-4-6 13:45
Ktorý z nich sa cíti lepšie

Môj prvotný výklad: prvý je zväzok a komprimované js a css súbory, druhý je komprimované html a js a css kód stránky a Http kompresia, atď, či môže byť zväzok a komprimované js a css súbory zatiaľ nie je jasné. Všetci to len vyskúšali a nepoužívali to do hĺbky. Teším sa na ďalší príspevok, keď to preskúmate.

Jimmy choo choo · 发表于 2024-4-24 15:35:15

Nastavenie vývojového prostredia tak, aby nekomprimovalo css, js, kód:

Prihlásenie, aby bolo viditeľné.

Jimmy choo choo · 发表于 2024-10-10 11:28:22

Použitie minify na komprimáciu a zlúčenie viacerých súborov css na prednej strane.
h ttps:// www.itsvse.com/thread-10845-1-1.html

		Automatické prihlásenie	Získať heslo
Získať heslo			Registrácia

[Zdroje]ASP.NET Core (XII) Spájanie JS, CSS a kompresia

Súvisiace príspevky

Prechádzané sekcie