Požadavky: V předchozích projektech .NET Framework MVC lze JS, CSS připojit a komprimovat pomocí knihovny Microsoft Microsoft.AspNet.Web.Optimization. Po použití ASP.NET Core, jak mám spojit a zkomprimovat stávající JS a CSS soubory?
Projekt .NET Framework odkazuje na následující:
Ukázkový kód:
závazný
Svazování kombinuje více souborů do jednoho souboru. Svazování snižuje počet serverových požadavků potřebných k vykreslení webového assetu, například webové stránky. Můžete vytvořit libovolný počet jednotlivých balíčků speciálně pro CSS, JavaScript a další. Méně souborů znamená přechod z prohlížeče na server nebo ze služby, která aplikaci poskytujeMéně HTTP požadavků。 To zlepšuje výkon načítání domovské stránky.
komprimovat
Minimalizujte odstranění zbytečných znaků z kódu, aniž byste měnili funkčnost. Výsledkem bylVelikost požadovaných zdrojů, jako jsou CSS, obrázky a JavaScript soubory, je výrazně snížena。 Mezi běžné vedlejší účinky miniaturizace patří zkrácení názvů proměnných na jeden znak a odstranění komentářů a zbytečných mezer. Zároveň můžeZmatení kódu, což není vhodné pro ostatní konkurenty, aby četli náš zdrojový kód.
Výkonnostní zisky díky svazování a kompresi
Následující tabulka popisuje rozdíly mezi načítáním assetů jednotlivě a používáním balíčkování a minifikace:
Šetří provoz a zlepšuje rychlost načítání v oblasti síťového přenosu, zároveň snižuje HTTP požadavky a zlepšuje rychlost načítání.
Pro HTTP záhlaví požadavků je prohlížeč velmi detailní. Při svazování je metrika celkového počtu odeslaných bajtů výrazně snížena. Časy načítání ukazují výrazné zlepšení, ale tento příklad běží lokálně. Svazování a minifikace lze kombinovat s aktivy přepravovanými přes síť pro dosažení vyšších výkonnostních zisků.
ASP.NET Core nemá vlastní zabalené a komprimované řešení a potřebuje použít řešení od třetí strany, tento článek používá "LigerShark.WebOptimizer.Core(Knihovna nakonec zavolala.)NUglifyImplementujte zpracování JS a CSS), GitHub adresu:Přihlášení k hypertextovému odkazu je viditelné.
Nejprve vytvořte nový projekt ASP.NET Core 6 a spusťte následující příkaz pro referenci:
Vytvořte novou statickou složku v projektu wwwroot pro uložení testovacích CSS a JS souborů. Vytvořte nový soubor CSS a JS, jak je uvedeno níže:
Upravte Program.cs soubor a přidejte službu WebOptimizer a middleware, hlavní kód je následující:
Když se pokusíme projekt spustit, zjistíme, že komentáře v CSS i JS kódu byly smazány, soubory byly komprimovány a některé proměnné v JS byly redukovány na jedno písmeno, jak je znázorněno na obrázku níže:
Pak vytvořte nový js soubor ze statické složky, abyste otestovali bundlovací funkci.Sjednoťte test.js a test2.js do jednoho common.js souboru(a negeneruje common.js fyzický soubor), konfigurační kód je následující:
Vizualizace jsou následující:
Odkaz:
Přihlášení k hypertextovému odkazu je viditelné.
Přihlášení k hypertextovému odkazu je viditelné.
|
Zveřejněno 28. 3. 2022 20:55:50
|
|
|
|
Pronajímatel|
Zveřejněno 2022-3-28 20:56:47
|
Zveřejněno 29. 3. 2022 00:38:21
|
(Nevím, jak smazat duplicitní komentáře, prosím, smaž tento příspěvek, až ho webmaster uvidí)