Minification and bundling in SharePoint

Questo articolo descrive come usare tecniche di minimizzazione e aggregazione con Essentials Web per ridurre il numero di richieste HTTP e ridurre il tempo necessario per caricare le pagine in SharePoint.

Quando si personalizza il sito Web, è possibile aggiungere un numero elevato di file aggiuntivi al server per supportare la personalizzazione. L'aggiunta di javascript, CSS e immagini aggiuntivi aumenta il numero di richieste HTTP al server, aumentando a sua volta il tempo necessario per visualizzare una pagina Web. Se si dispone di più file dello stesso tipo, è possibile creare dei bundle di questi file per accelerarne il download.

Per i file JavaScript e CSS, è anche possibile usare un approccio denominato minification, in cui si riducono le dimensioni totali dei file rimuovendo spazi vuoti e altri caratteri non necessari.

Minimizzazione e creazione di bundle di file JavaScript e CSS tramite Web Essentials

È possibile utilizzare software di terze parti, ad esempio Web Essentials, per raggruppare i file CSS e JavaScript.

Web Essentials offre due forme di creazione di bundle:

• .bundle: per i file CSS e JavaScript
• .sprite: per le immagini (disponibile solo in Visual Studio 2013)

È possibile utilizzare Web Essentials se si dispone di una funzionalità esistente con alcuni elementi di personalizzazione cui viene fatto riferimento all'interno di una pagina master personalizzata, ad esempio:

Per creare un bundle TE000127218 e CSS in Web Essentials

1. In Visual Studio, in Esplora risorse selezionare i file che si desidera includere nel bundle.

2. Fare clic con il pulsante destro del mouse sui file selezionati e quindi scegliere Web Essentials>Create file bundle JavaScript dal menu di scelta rapida. Ad esempio:

   

Visualizzazione dei risultati della creazione di bundle di file JavaScript e CSS

Quando si crea un bundle di JavaScript e CSS, Web Essentials crea un file XML, denominato file recipe, che identifica i file JavaScript e CSS nonché altre informazioni sulla configurazione:

Inoltre, se il flag minify è impostato su true nella ricetta di bundling, le dimensioni dei file vengono ridotte e raggruppate. Ciò significa che le nuove versioni minimizzate dei file JavaScript sono state create ed è possibile farvi riferimento nella pagina master.

Quando si carica una pagina dal sito Web, è possibile utilizzare gli strumenti di sviluppo dal browser, come Internet Explorer 11, per visualizzare il numero di richieste inviate al server e il tempo impiegato da ciascun file per il caricamento.

La figura seguente mostra il risultato del caricamento di file JavaScript e CSS prima della minimizzazione.

In seguito all'aggregazione dei file CSS e JavaScript, il numero di richieste viene interrotto a 74 e ogni file impiega un tempo leggermente più lungo dei file originali per ogni singolo download:

Dopo il bundling, il file di bundle JavaScript viene ridotto in modo significativo da 815 KB a 365 KB:

Aggregazione di immagini tramite la creazione di un'immagine sprite

Analogamente all'aggregazione di file CSS e JavaScript, è possibile combinare molte piccole icone e altre immagini comuni in un foglio sprite più grande e quindi utilizzare CSS per visualizzare le singole immagini. Invece di scaricare ogni singola immagine, il Web browser dell'utente scarica il foglio sprite una volta e quindi lo memorizza nella cache nel computer locale. Ciò migliora le prestazioni di caricamento della pagina riducendo il numero di download e sequenze di andata e ritorno al server Web.

Per creare uno sprite di immagine in Web Essentials**

1. In Visual Studio, in Esplora risorse selezionare i file che si desidera includere nel bundle.

2. Fare clic con il pulsante destro del mouse sui file selezionati e quindi scegliere Web Essentials>Create image sprite dal menu di scelta rapida. Ad esempio:

   

3. Selezionare il percorso in cui salvare il file sprite. Il file .sprite è un file XML che descrive le impostazioni e i file nello sprite. Le figure seguenti mostrano un esempio di file PNG sprite e il file XML .sprite corrispondente.