ASP.NET Core (dvanásť) front-end JS, CSS bundlovanie a kompresia

Malý · Zverejnené 2022-3-28 20:55:50

Požiadavky: V predchádzajúcich projektoch .NET Framework MVC je možné JS, CSS zbaliť a komprimovať pomocou knižnice Microsoft Microsoft.AspNet.Web.Optimization. Po použití ASP.NET Core, ako zbaliť a komprimovať existujúce JS a CSS súbory?

Projekt .NET Framework odkazuje na nasledovné:

Prihlásenie je viditeľné.

Ukážkový kód:

Prihlásenie je viditeľné.

záväzný

Zväzovanie kombinuje viacero súborov do jedného súboru. Zväzovanie znižuje počet serverových požiadaviek potrebných na vykreslenie webového assetu, ako je napríklad webová stránka. Môžete vytvoriť toľko jednotlivých balíkov, koľko chcete, špeciálne pre CSS, JavaScript a ďalšie. Menej súborov znamená prechod z prehliadača na server alebo zo služby, ktorá poskytuje aplikáciuMenej HTTP požiadaviek。 To zlepšuje výkon načítavania domovskej stránky.

komprimovať

Minimalizujte odstraňovanie zbytočných znakov z kódu bez zmeny funkčnosti. Výsledok bolVeľkosť požadovaných zdrojov, ako sú CSS, obrázky a JavaScript súbory, je výrazne znížená。 Bežné vedľajšie účinky minifikácie zahŕňajú skracovanie názvov premenných na jeden znak a odstránenie komentárov a zbytočných medzier. Zároveň však môžeZmätenie kódu, čo nie je vhodné pre ostatných konkurentov, aby čítali náš zdrojový kód.

Výkonnostné zisky z balenia a kompresie

Nasledujúca tabuľka popisuje rozdiely medzi načítaním assetov individuálne a použitím zbalenia a minifikácie:

Šetrí prevádzku a zlepšuje rýchlosť načítavania v oblasti sieťového prenosu, zároveň znižuje HTTP požiadavky a zlepšuje rýchlosť načítavania.

Pre HTTP hlavičky požiadaviek je prehliadač veľmi detailný. Pri zväzovaní sa metrika zasílaných bajtov výrazne zníži. Časy načítavania ukazujú výrazné zlepšenia, ale tento príklad beží lokálne. Balíkovanie a minifikácia je možné kombinovať s aktívami prenášanými cez sieť na dosiahnutie vyššieho výkonu.

ASP.NET Core nemá vlastné zabalené a komprimované riešenie a potrebuje použiť riešenie poskytované treťou stranou, tento článok používa "LigerShark.WebOptimizer.Core(Knižnica nakoniec zavolala.)NUglifyImplementujte spracovanie JS a CSS), GitHub adresu:Prihlásenie na hypertextový odkaz je viditeľné.

Najprv vytvorte nový projekt ASP.NET Core 6 a spustite nasledujúci príkaz na referenciu:

Prihlásenie je viditeľné.

Vytvorte nový statický priečinok v projekte wwwroot na uloženie testovacích CSS a JS súborov. Vytvorte nový CSS a JS súbor, ako je uvedené nižšie:

Upravte Program.cs súbor a pridajte službu WebOptimizer a middleware, hlavný kód je nasledovný:

Prihlásenie je viditeľné.

Keď sa pokúsime spustiť projekt, zistíme, že komentáre v CSS aj JS kóde boli vymazané, súbory komprimované a niektoré premenné v JS boli zredukované na jedno písmeno, ako je znázornené na obrázku nižšie:

Potom vytvorte nový js súbor zo statického priečinka, aby ste otestovali funkciu balíčkovania.Zoskupte test.js a test2.js do jedného common.js súboru(a negeneruje common.js fyzický súbor), konfiguračný kód je nasledovný:

Prihlásenie je viditeľné.

Vizualizácie sú nasledovné:

Referencia:

Prihlásenie na hypertextový odkaz je viditeľné.
Prihlásenie na hypertextový odkaz je viditeľné.

Malý · Zverejnené 2022-3-28 20:56:47

Revízia:

ASP.NET Core (XI) koncová trasa pridáva middleware na zobrazenie všetkých DI služieb
https://www.itsvse.com/thread-10269-1-1.html

ASP.NET Podrobné vysvetlenie priorít konfigurácie v Core(10).
https://www.itsvse.com/thread-10265-1-1.html

ASP.NET Podrobné vysvetlenie middleware middleware v Core (9).
https://www.itsvse.com/thread-9647-1-1.html

ASP.NET Podrobné vysvetlenie Core Middleware
https://www.itsvse.com/thread-8126-1-1.html

ASP.NET z predvolených parametrov používateľského rozhrania Swagger v Core(8).
https://www.itsvse.com/thread-9640-1-1.html

ASP.NET Jadro (7) Hĺbková analýza zdrojového kódu frameworku
https://www.itsvse.com/thread-9601-1-1.html

ASP.NET Core (VI) DI manuálne získava metódu injektovania objektov
https://www.itsvse.com/thread-9595-1-1.html

ASP.NET Core (päť) je založený na distribuovaných transakciách podľa CAP
https://www.itsvse.com/thread-9593-1-1.html

ASP.NET Core(4) filter zjednotený validácia modelu ModelState
https://www.itsvse.com/thread-9589-1-1.html

ASP.NET Jadro (iii) Dynamicky vytvárať inštancie pomocou ActivatorUtilities
https://www.itsvse.com/thread-9488-1-1.html

ASP.NET Core (2) Reštartovať aplikáciu pomocou kódu
https://www.itsvse.com/thread-9480-1-1.html

ASP.NET Core (1) používa Redis caching
https://www.itsvse.com/thread-9393-1-1.html

Lietajúce ryby · Zverejnené 29.3.2022 00:38:21

Naučte sa učiť.

Johnyoung · Zverejnené 6. 4. 2022 o 12:02:33

Ligershark.WebOptimizer.Core a WebMarkupMin.AspNetCore6 skúšali

Malý · Zverejnené 6. 4. 2022 o 13:45:12

johnyoung Zverejnené 6.4.2022 o 12:02
Ligershark.WebOptimizer.Core a WebMarkupMin.AspNetCore6 skúšali

Ktorý je lepší

Johnyoung · Zverejnené 6. 4. 2022 o 14:53:12

Tento príspevok naposledy upravoval johnyoung 6. 4. 2022 o 14:56

(Neviem, ako vymazať duplicitné komentáre, prosím, vymažte tento príspevok, keď ho webmaster uvidí)

Johnyoung · Zverejnené 6. 4. 2022 o 14:54:11

Little Sto Zverejnené 6.4.2022 o 13:45
Ktorý je lepší

Mám predbežné pochopenie: prvé znamená zbaliť a komprimovať js a css súbory, druhé komprimovať page html, js a css kód, http kompresiu na stránke a podobne, a nie je jasné, či druhé dokáže zbaliť a komprimovať js a css súbory. Práve som to vyskúšal a nepoužil som to do hĺbky. Teším sa, že to preskúmate a zverejníte ďalší článok.

Malý · Zverejnené 24.4.2024 o 15:35:15

Nakonfigurujte vývojové prostredie bez kompresie CSS a JS, kód:

Prihlásenie je viditeľné.

Malý · Zverejnené 10.10.2024 11:28:22

Front-end používa Minify na kompresiu a zlúčenie viacerých CSS súborov
https://www.itsvse.com/thread-10845-1-1.html

[Zdroj] ASP.NET Core (dvanásť) front-end JS, CSS bundlovanie a kompresia

Súvisiace príspevky

Zobrazené sekcie