Statische assets bundelen en minificeren in ASP.NET Core

Door Scott Addie en David Pine

In dit artikel worden de voordelen uitgelegd van het toepassen van bundeling en minificatie, waaronder hoe deze functies kunnen worden gebruikt met ASP.NET Core-web-apps.

Wat is bundeling en minificatie

Bundeling en minificatie zijn twee verschillende prestatieoptimalisaties die u in een web-app kunt toepassen. Samen worden bundeling en minificatie gebruikt om de prestaties te verbeteren door het aantal serveraanvragen te verminderen en de grootte van de aangevraagde statische assets te verkleinen.

Bundeling en minificatie verbeteren voornamelijk de laadtijd van de eerste paginaaanvraag. Zodra een webpagina is aangevraagd, slaat de browser de statische assets (JavaScript, CSS en afbeeldingen) in de cache op. Bundeling en minificatie verbeteren dus niet de prestaties bij het aanvragen van dezelfde pagina, of pagina's, op dezelfde site die dezelfde assets aanvraagt. Als de expires-header niet correct is ingesteld op de assets en als bundeling en minificatie niet worden gebruikt, worden de nieuwheidsheuristieken van de browser na enkele dagen de assets als verouderd gemarkeerd. Daarnaast vereist de browser een validatieaanvraag voor elke asset. In dit geval bieden bundeling en minificatie een prestatieverbetering, zelfs na de eerste paginaaanvraag.

Bundeling

Bundeling combineert meerdere bestanden in één bestand. Bundeling vermindert het aantal serveraanvragen dat nodig is om een webasset weer te geven, zoals een webpagina. U kunt een willekeurig aantal afzonderlijke bundels maken, specifiek voor CSS, JavaScript, enzovoort. Minder bestanden betekenen minder HTTP-aanvragen van de browser naar de server of van de service die uw toepassing levert. Dit resulteert in verbeterde laadprestaties van de eerste pagina.

Minificatie

Minification verwijdert overbodige tekens uit code zonder de functionaliteit te wijzigen. Het resultaat is een aanzienlijke vermindering van de aangevraagde assets (zoals CSS, afbeeldingen en JavaScript-bestanden). Veelvoorkomende effecten van minificatie zijn het inkorten van variabelenamen tot één teken en het verwijderen van opmerkingen en onnodige witruimte.

Houd rekening met de volgende JavaScript-functie:

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 vermindert de functie tot het volgende:

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

Naast het verwijderen van de opmerkingen en onnodige witruimte, zijn de volgende parameter- en variabelenamen als volgt gewijzigd:

Impact van bundeling en minificatie

De volgende tabel bevat een overzicht van de verschillen tussen het afzonderlijk laden van assets en het gebruik van bundeling en minificatie voor een typische web-app.

De laadtijd is verbeterd, maar dit voorbeeld is lokaal uitgevoerd. Betere prestatieverbeteringen worden gerealiseerd bij het gebruik van bundeling en minificatie met assets die via een netwerk worden overgedragen.

De test-app die wordt gebruikt om de afbeeldingen in de voorgaande tabel te genereren, toont typische verbeteringen die mogelijk niet van toepassing zijn op een bepaalde app. We raden u aan een app te testen om te bepalen of bundeling en minificatie een verbeterde laadtijd oplevert.

Kies een bundelings- en minificatiestrategie

ASP.NET Core biedt geen systeemeigen bundelings- en minificatieoplossing. Hulpprogramma's van derden, zoals Gulp en Webpack, bieden werkstroomautomatisering voor bundeling en minificatie, evenals linting en optimalisatie van afbeeldingen. Bundelen en minificeren voordat de implementatie het voordeel biedt van verminderde serverbelasting. Het bundelen en minificeren verhoogt echter de complexiteit van de build en werkt alleen met statische bestanden.

Op omgeving gebaseerde bundeling en minificatie

Als best practice moeten de gebundelde en geminimiseerde bestanden van uw app worden gebruikt in een productieomgeving. Tijdens de ontwikkeling maken de oorspronkelijke bestanden het eenvoudiger om fouten in de app op te sporen.

Geef op welke bestanden u op uw pagina's wilt opnemen met behulp van de Helper voor omgevingstags in uw weergaven. De Helper voor omgevingstags geeft alleen de inhoud weer wanneer deze wordt uitgevoerd in specifieke omgevingen.

Met de volgende environment tag worden de niet-verwerkte CSS-bestanden weergegeven wanneer ze worden uitgevoerd in de Development omgeving:

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

Met de volgende environment tag worden de gebundelde en minificeerde CSS-bestanden weergegeven wanneer ze worden uitgevoerd in een andere omgeving dan Development. Bijvoorbeeld, het gebruik van Production of Staging activeert de weergave van deze opmaakmodellen.

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

Aanvullende bronnen

• Meerdere omgevingen gebruiken
• Tag Helpers