Eventi
19 nov, 23 - 21 nov, 23
Partecipa alle sessioni online di Microsoft Ignite create per espandere le tue competenze e aiutarti a risolvere i problemi complessi di oggi.
Iscriviti subitoQuesto browser non è più supportato.
Esegui l'aggiornamento a Microsoft Edge per sfruttare i vantaggi di funzionalità più recenti, aggiornamenti della sicurezza e supporto tecnico.
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.
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.
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.
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 |
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.
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.
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>
<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>
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>
<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>
Feedback su ASP.NET Core
ASP.NET Core è un progetto di open source. Selezionare un collegamento per fornire feedback:
Eventi
19 nov, 23 - 21 nov, 23
Partecipa alle sessioni online di Microsoft Ignite create per espandere le tue competenze e aiutarti a risolvere i problemi complessi di oggi.
Iscriviti subito