Realizzazione Siti e Portali Web – Wordpress CODING – Mobile APP – Consulenze SEO – Web design – Ecommerce

MVC & C#: Bundling and Minification: buone pratiche per velocizzare le prestazioni al caricamento.

Nella programmazione C# e MVC si possono utilizzare delle tecniche assai utili per creare siti con il massimo delle prestazioni. Attraverso uno strumento pressoché nativo è possibile lavorare in sviluppo su file leggibili e averli immediatamente ottimizzati per la versione di release.

La maggior parte degli attuali browser limita il numero il numero di connessioni simultanee per ciascun HOST. Ciò significa che, mentre alcune richieste sono in fase di elaborazione, quelle che eccedono il numero massimo di connessioni sul medesimo HOST verranno messe in coda dal browser. Nell’immagine sottostante si osserva come alcune risorse in download sono in attesa di essere scaricate proprio per questa limitazione.Network_Browser_Files_Downloads

Per questo motivo si consiglia spesso, quando è possibile, di far scaricare le risorse da url differenti, per sfruttare al massimo questa caratteristica. Per esempio dedicando una directory alle immagini.

Analizzando il dettaglio di un singolo download si osservi il tempo di attesa prima che la risorsa venga scaricata (barre grigie). La barra gialla è l’orario della richiesta al primo byte, cioè il tempo necessario per inviare la richiesta e di ricevere la prima risposta dal server. La barre verde mostra il tempo necessario per ricevere i dati di risposta dal server. La barra viola invece mostra il tempo necessario per inizializzare la criptazione dei dai richiesta dalla connessione ssl (sempre più utilizzata anche perché consigliata da Google). Tale tempo però ricade nel tempo di setup iniziale (barra gialla).

Tempi_download

Quindi ovviamente le strade da percorrere sono due: raggruppare più script/css assieme (bundling) e ridurre al massimo i byte da trasmettere (minification).

Utilizzare Bundle e Minification in MVC

Per entrare nel dettaglio aprire il file App_Start \ BundleConfig.cs ed esaminare il metodo registerBundles che viene utilizzato per creare, registrare e configurare il bundle dei file. Il codice seguente mostra una porzione del metodo registerBundles.

Si osservi come venga creata un URI ScriptBundle(“~/bundles/jquery”) al quale viene aggiunto un file da comprimere (Minification) Include(“~/Scripts/jquery-{version}.js”)).Analoga procedura viene eseguita per i file di tipo CSS.

Per ogni file incluso, se esistente, in fase di release viene aggiunto anche la versione .min.

Utilizzo di una CDN

Volendo è possibile utilizzare risorse esterne per caricare file.

Nel codice appena scritto, jQuery sarà richiesto dal CDN, mentre in modalità di rilascio e la versione di debug di jQuery sarà recuperato a livello locale in modalità debug. Quando si utilizza un CDN, si dovrebbe avere un meccanismo di ripiego nel caso in cui la richiesta non riesce. Il seguente frammento di markup porto alla fine del file di layout mostra l’aggiunta di uno script per gestire problemi di collegamento tramite CDN.

Attenzione
Bundlee minification vengono attivati o disattivati impostando il valore dell’attributo di debug nel file web.config. Nel seguente codice XML, debug è impostata su true e minification è disabilitato.

Per abilitare bundling e minification, impostare il valore di debug su “false”. Ovviamente questo non è possibile durante lo sviluppo. Per ovviare a questo inconveniente il codice seguente consente il bundle e la  minification sovrascrivendo le impostazione nel file web.config.

Creare i file bundle

Come già visto si possono aggiungere file ad una risorsa attraverso il metodo .Add. Sebbene esista la possibilità di includere file di directory anche utilizzando caratteri jolly (*), se ne scoglia l’uso poiché il funzionamento corretto è spesso definito anche dall’ordine di caricamento dei file che in questa maniera seguono invece un ordine alfabetico.

Quindi un po’ di codice prolisso è da preferire…

Una volta definite tutte le risorse, per caricarle sulla pagina il codice è:<!DOCTYPE html>

Una considerazione sulla “minificazione”.

L’intento del bundle è chiaro: genero una risorsa che accorpa le risorse abbattendo i tempi di attesa. Ma cosa fa la parte di minificazione?

diventa (dopo l’eliminazione dei commenti e l’ottimizzazione del codice:

Conclusioni

Attraverso queste tecniche si può sviluppare utilizzando un albero delle directory come più fa comodo e nel contempo avere codice “lato client” comunque chiaro. Ci penserà il Framework a mettere in atto tutte le strategie per ottimizzare il traffico di rete.

Quanto sopra esposto fa parte del pacchetto: https://www.nuget.org/packages/Microsoft.AspNet.Web.Optimization/

 

 

Related posts

Leave a Comment

Lascia un commento

Your email address will not be published.




Top