Aggregare e minificare gli asset statici in ASP.NET Core

Di Scott Addie e David Pine

Questo articolo illustra i vantaggi dell'applicazione di bundle e minimizzazione, incluso il modo in cui queste funzionalità possono essere usate con ASP.NET app Web core.

Che cos'è la creazione di bundle e la minimizzazione

La creazione di bundle e la minimizzazione sono due ottimizzazioni delle prestazioni distinte che è possibile applicare in un'app Web. Usati insieme, creazione di bundle e minimizzazione migliorano le prestazioni riducendo il numero di richieste del server e riducendo le dimensioni degli asset statici richiesti.

La creazione di bundle e la minimizzazione migliorano principalmente il tempo di caricamento della prima richiesta di pagina. Dopo aver richiesto una pagina Web, il browser memorizza nella cache gli asset statici (JavaScript, CSS e immagini). Di conseguenza, la creazione di bundle e la minimizzazione non migliorano le prestazioni quando si richiede la stessa pagina, o pagine, nello stesso sito che richiede gli stessi asset. Se l'intestazione di scadenza non è impostata correttamente sugli asset e se la creazione di bundle e la minificazione non vengono usate, l'euristica dell'aggiornamento del browser contrassegna gli asset non aggiornati dopo alcuni giorni. Inoltre, il browser richiede una richiesta di convalida per ogni asset. In questo caso, la creazione di bundle e la minimizzazione offrono un miglioramento delle prestazioni anche dopo la prima richiesta di pagina.

Impacchettare

La creazione di bundle consente di combinare più file in un unico file. La creazione di bundle riduce il numero di richieste server necessarie per eseguire il rendering di un asset Web, ad esempio una pagina Web. È possibile creare un numero qualsiasi di singoli bundle specificamente per CSS, JavaScript e così via. Meno file indicano un minor numero di richieste HTTP dal browser al server o dal servizio che fornisce l'applicazione. Ciò comporta un miglioramento delle prestazioni di caricamento della prima pagina.

Minimizzazione

La minificazione rimuove i caratteri non necessari dal codice senza modificare la funzionalità. Il risultato è una riduzione significativa delle dimensioni degli asset richiesti ,ad esempio css, immagini e file JavaScript. Gli effetti collaterali comuni della minificazione includono la riduzione dei nomi delle variabili in un carattere e la rimozione di commenti e spazi vuoti non necessari.

Si consideri la funzione JavaScript seguente:

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

La minimizzazione riduce la funzione al seguente:

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

Oltre a rimuovere i commenti e gli spazi vuoti non necessari, i nomi dei parametri e delle variabili seguenti sono stati rinominati come segue:

Originale	Ridenominazione
imageTagAndImageID	t
imageContext	a
imageElement	r

Impatto della creazione di bundle e della minimizzazione

La tabella seguente illustra le differenze tra il caricamento individuale degli asset e l'uso di bundle e minimizzazione per un'app Web tipica.

Azione	Senza B/M	Con B/M	Riduzione
Richieste di file	18	7	61%
Byte trasferiti (KB)	265	156	41%
Tempo di caricamento (ms)	2360	885	63%

Il tempo di caricamento è stato migliorato, ma questo esempio è stato eseguito in locale. Quando si usano la creazione di bundle e la minimizzazione con asset trasferiti in rete, vengono realizzati miglioramenti delle prestazioni maggiori.

L'app di test usata per generare le figure nella tabella precedente illustra i miglioramenti tipici che potrebbero non essere applicati a una determinata app. È consigliabile testare un'app per determinare se la creazione di bundle e la minimizzazione producono un tempo di caricamento migliorato.

Scegliere una strategia di aggregazione e minimizzazione

ASP.NET Core è compatibile con WebOptimizer, una soluzione di creazione di bundle e minimizzazione open source. Per istruzioni di configurazione e progetti di esempio, vedere WebOptimizer. ASP.NET Core non offre una soluzione nativa di aggregazione e minimizzazione.

Gli strumenti di terze parti, ad esempio Gulp e Webpack, forniscono l'automazione del flusso di lavoro per la creazione di bundle e la minificazione, nonché l'ottimizzazione dell'linting e dell'immagine. Usando la creazione di bundle e la minimizzazione, i file minimizzati vengono creati prima della distribuzione dell'app. La creazione di bundle e la minimizzazione prima della distribuzione offrono il vantaggio di ridurre il carico del server. Tuttavia, è importante riconoscere che la creazione di bundle e la minificazione aumenta la complessità della compilazione e funziona solo con i file statici.

Creazione di bundle e minimizzazione basata sull'ambiente

Come procedura consigliata, i file aggregati e minimizzati dell'app devono essere usati in un ambiente di produzione. Durante lo sviluppo, i file originali semplificano il debug dell'app.

Specificare i file da includere nelle pagine usando l'helper tag di ambiente nelle visualizzazioni. L'helper tag di ambiente esegue il rendering del relativo contenuto solo quando viene eseguito in ambienti specifici.

Il tag seguente environment esegue il rendering dei file CSS non elaborati durante l'esecuzione nell'ambiente Development :

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

Il tag seguente environment esegue il rendering dei file CSS in bundle e minimizzati durante l'esecuzione in un ambiente diverso da Development. Ad esempio, l'esecuzione in Production o Staging attiva il rendering di questi fogli di stile:

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

Risorse aggiuntive

• Usare più ambienti
• Helper per i tag