Paketera och minimera statiska tillgångar i ASP.NET Core

Av Scott Addie och David Pine

Den här artikeln förklarar fördelarna med att tillämpa paketering och minifiering, inklusive hur dessa funktioner kan användas med ASP.NET Core-webbappar.

Vad är paketering och minifiering

Paketering och minifiering är två distinkta prestandaoptimeringar som du kan använda i en webbapp. Kombinationserbjudanden och minifiering förbättrar prestandan genom att minska antalet serverbegäranden och minska storleken på de begärda statiska tillgångarna.

Paketering och minifiering förbättrar främst inläsningstiden för första sidans begäran. När en webbsida har begärts cachelagrar webbläsaren de statiska tillgångarna (JavaScript, CSS och bilder). Därför förbättrar inte paketering och minifiering prestanda när du begär samma sida eller sidor på samma webbplats och begär samma tillgångar. Om förfallorubriken inte är korrekt inställd på resurserna och paketering och minifiering inte används, markerar webbläsarens heuristik för att avgöra färskhet resurserna som inaktuella efter några dagar. Dessutom kräver webbläsaren en valideringsbegäran för varje tillgång. I det här fallet ger paketering och minifiering en prestandaförbättring även efter den första sidbegäran.

Kombinationserbjudanden

Med paketering kombineras flera filer i en enda fil. Kombinationserbjudanden minskar antalet serverbegäranden som krävs för att återge en webbtillgång, till exempel en webbsida. Du kan skapa valfritt antal enskilda paket specifikt för CSS, JavaScript osv. Färre filer innebär färre HTTP-begäranden från webbläsaren till servern eller från tjänsten som tillhandahåller ditt program. Detta resulterar i bättre prestanda för första sidans inläsning.

Minifiering

Minification tar bort onödiga tecken från kod utan att ändra funktionaliteten. Resultatet är en betydande storleksminskning av begärda tillgångar (till exempel CSS, bilder och JavaScript-filer). Vanliga effekter av minifiering är att förkorta variabelnamn till ett tecken och ta bort kommentarer och onödiga blanksteg.

Överväg följande JavaScript-funktion:

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/, ''));
}

Minification minskar funktionen till följande:

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

Förutom att ta bort kommentarer och onödiga blanksteg har följande parameter- och variabelnamn bytt namn på följande sätt:

Effekten av paketering och minifiering

I följande tabell beskrivs skillnader mellan att separat läsa in tillgångar och använda paketering och minifiering för en typisk webbapp.

Laddningstiden förbättrades, men det här exemplet kördes lokalt. Större prestandavinster realiseras när du använder paketering och minifiering med tillgångar som överförs via ett nätverk.

Testappen som används för att generera siffrorna i föregående tabell visar typiska förbättringar som kanske inte gäller för en viss app. Vi rekommenderar att du testar en app för att avgöra om paketering och minifiering ger en bättre belastningstid.

Välj en strategi för paketering och minifiering

ASP.NET Core tillhandahåller inte någon intern paketerings- och minifieringslösning. Verktyg från tredje part, till exempel Gulp och Webpack, tillhandahåller arbetsflödesautomation för paketering och minifiering, samt linting och bildoptimering. Paketering och minifiering före distribution ger fördelen med minskad serverbelastning. Paketering och minifiering ökar dock byggkomplexiteten och fungerar bara med statiska filer.

Miljöbaserad paketering och minifiering

Bästa praxis är att de paketerade och minifierade filerna i din app ska användas i en produktionsmiljö. Under utvecklingen gör de ursprungliga filerna det enklare att felsöka appen.

Ange vilka filer som ska inkluderas på sidorna med hjälp av hjälpverktyget för miljötagg i dina vyer. Hjälpverktyget för miljötagg återger bara innehållet när det körs i specifika miljöer.

Följande environment tagg renderar de obearbetade CSS-filerna när de Development körs i miljön:

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

<environment names="Staging,Production">
    <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>

Följande environment tagg renderar de paketerade och minifierade CSS-filerna när de körs i en annan miljö än Development. Om du till exempel kör i Production eller Staging utlöser återgivningen av dessa formatmallar:

<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>

<environment names="Staging,Production">
    <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>

Ytterligare resurser

• Använda flera miljöer
• Tagghjälpare