Balení a minifikace statických prostředků v ASP.NET Core

Scott Addie a David Pine

Tento článek vysvětluje výhody použití sdružování a minifikace, včetně způsobu použití těchto funkcí s webovými aplikacemi ASP.NET Core.

Co je sdružování a minifikace

Sdružování a minifikace jsou dvě různé optimalizace výkonu, které můžete použít ve webové aplikaci. Společné použití, sdružování a minifikace zlepšují výkon snížením počtu požadavků na server a snížením velikosti požadovaných statických prostředků.

Sdružování a minifikace primárně vylepšují dobu načítání požadavků na první stránku. Po vyžádání webové stránky prohlížeč ukládá statické prostředky do mezipaměti (JavaScript, CSS a obrázky). Sdružování a minifikace tedy nezlepšují výkon při vyžádání stejné stránky nebo stránek na stejném webu, který požaduje stejné prostředky. Pokud není hlavička vypršení platnosti u prostředků správně nastavená a pokud se nevyužívá sdružování a minifikace, heuristika prohlížeče označí zastaralá aktiva po několika dnech. Prohlížeč navíc vyžaduje žádost o ověření pro každý prostředek. V tomto případě sdružování a minifikace poskytují zlepšení výkonu i po požadavku na první stránku.

Svazkování

Sdružování kombinuje několik souborů do jediného souboru. Sdružování snižuje množství serverových požadavků nezbytných k vykreslení webového prostředku, jako je například webová stránka. Můžete vytvořit libovolný počet jednotlivých sad speciálně pro šablony stylů CSS, JavaScript atd. Méně souborů znamená méně požadavků HTTP z prohlížeče na server nebo ze služby poskytující vaši aplikaci. Výsledkem je vylepšený výkon načítání na první stránce.

Minimalizace

Minifikace odebere nepotřebné znaky z kódu beze změny funkčnosti. Výsledkem je významné snížení velikosti požadovaných prostředků (například souborů CSS, obrázků a javascriptových souborů). Mezi běžné účinky minifikace patří zkrácení názvů proměnných na jeden znak a odebrání komentářů a nepotřebných prázdných znaků.

Představte si následující funkci JavaScriptu:

AddAltToImg = function (imageTagAndImageID, imageContext) {
  ///<signature>
  ///<summary> Adds an alt tab to the image
  // </summary>
  //<param name="imgElement" type="String">The image selector.</param>
  //<param name="ContextForImage" type="String">The image context.</param>
  ///</signature>
  var imageElement = $(imageTagAndImageID, imageContext);
  imageElement.attr('alt', imageElement.attr('id').replace(/ID/, ''));
}

Minifikace zmenšuje funkci na následující:

AddAltToImg=function(t,a){var r=$(t,a);r.attr("alt",r.attr("id").replace(/ID/,""))};

Kromě odebrání komentářů a nepotřebných prázdných znaků se následující názvy parametrů a proměnných přejmenovaly takto:

Původní	Přejmenovaný
imageTagAndImageID	t
imageContext	a
imageElement	r

Dopad sdružování a minifikace

Následující tabulka popisuje rozdíly mezi individuálním načítáním prostředků a používáním sdružování a minifikace pro typickou webovou aplikaci.

Akce	Bez B/M	S B/M	Redukce
Požadavky na soubory	18	7	61 %
Převedené bajty (KB)	265	156	41 %
Doba načítání (ms)	2360	885	63 %

Doba načítání se zlepšila, ale tento příklad běžel místně. Při použití sdružování a minifikace s prostředky přenášenými přes síť se zjišťují vyšší zvýšení výkonu.

Testovací aplikace používaná ke generování obrázků v předchozí tabulce ukazuje typická vylepšení, která se nemusí v dané aplikaci vztahovat. Doporučujeme otestovat aplikaci, abyste zjistili, jestli sdružování a minifikace přináší vylepšenou dobu načítání.

Volba strategie sdružování a minifikace

ASP.NET Core neposkytuje nativní řešení sdružování a minifikace. Nástroje třetích stran, jako jsou Gulp a Webpack, poskytují automatizaci pracovních postupů pro sdružování a minifikace a také lintování a optimalizaci obrázků. Sdružování a minifikace před nasazením poskytuje výhodu sníženého zatížení serveru. Sdružování a minifikace ale zvyšují složitost sestavení a pracují pouze se statickými soubory.

Sdružování a minifikace založené na prostředí

Osvědčeným postupem je použití sbalených a minifikovaných souborů vaší aplikace v produkčním prostředí. Během vývoje usnadňují původní soubory ladění aplikace.

Pomocí pomocné rutiny značky prostředí v zobrazení určete, které soubory chcete do stránek zahrnout. Pomocník značky prostředí vykreslí jeho obsah pouze při spuštění v určitých prostředích.

Následující environment značka vykreslí nezpracované soubory CSS při spuštění v Development prostředí:

<environment include="Development">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</environment>

Následující environment značka vykreslí sbalené a minifikované soubory CSS při spuštění v jiném prostředí než Development. Například spuštěním v Production těchto šablonách stylů nebo Staging aktivací vykreslování těchto šablon stylů:

<environment exclude="Development">
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
    <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>

Další materiály

• Používání více prostředí
• Pomocné rutiny značek