Minimizzazione e creazione di bundle in SharePoint Online

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

Quando si personalizza il sito Web, è possibile che venga aggiunto al server un numero elevato di file aggiuntivi per supportare la personalizzazione. L'aggiunta di file JavaScript, CSS e immagini aumenta il numero di richieste HTTP al server, che a sua volta aumenta il tempo necessario per visualizzare una pagina Web. Se si hanno più file dello stesso tipo, è possibile raggrupparli in un bundle per velocizzare il download.

Per i file JavaScript e CSS è anche possibile usare un approccio chiamato minimizzazione, che consente di ridurre le dimensioni totali dei file rimuovendo gli spazi e altri caratteri non necessari.

Minimizzare e creare bundle di file JavaScript e CSS con Web Essentials

Per creare bundle di file CSS e JavaScript, è possibile usare software di terze parti, ad esempio Web Essentials.

Importante : Web Essentials è un progetto open source di terze parti, basato su community. Il software è un'estensione di Visual Studio 2012 e Visual Studio 2013 e non è supportato da Microsoft. Per scaricare Web Essentials, visitare il sito Web all'indirizzo http://vswebessentials.com/download.

Web Essentials offre due modalità per la creazione di bundle:

  • .bundle: per i file CSS e JavaScript

  • .sprite: per le immagini (disponibile solo in Visual Studio 2013)

Web Essentials può essere usato se una caratteristica esistente include alcuni elementi di personalizzazione a cui fa riferimento una pagina master personalizzata, ad esempio:

eNom-Configurazione-1-3

Per creare un bundle di file TE000127218 e CSS in Web Essentials

  1. In Visual Studio aprire Esplora soluzioni e selezionare i file da includere nel bundle.

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

    Gli otto ruoli svolti dalle immagini in una presentazione

Visualizzare i risultati della creazione di bundle dei file JavaScript e CSS

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

Barra di accesso rapido nell'angolo superiore sinistro (posizione predefinita)

Inoltre, se il flag minify è impostato su true nel file recipe del bundle, le dimensioni dei file vengono ridotte e i file raggruppati. Questo significa che vengono create nuove versioni minimizzate dei file JavaScript ai cui si può fare riferimento nella pagina master.

Finestra di dialogo Aggiungi nuovo account in cui è indicato che l'account non può essere configurato

Quando si carica una pagina da un sito Web, si possono usare gli strumenti di sviluppo dal Web browser, ad esempio Internet Explorer 11, per visualizzare il numero di richieste inviate al server e il tempo necessario per caricare ogni file.

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

Gruppo Numeri nella scheda Home

Dopo l'aggiunta dei file CSS e JavaScript al bundle, il numero di richieste è sceso a 74 e il download di ogni singolo file ha richiesto poco tempo in più rispetto ai file originali:

Screenshot che mostra 74 elementi da scaricare

Dopo l'aggiunta, il file del bundle JavaScript risulta ridotto significativamente da 815 KB a 365 KB:

Impostazioni di sola lettura per il tipo di contenuto

Creare bundle di immagini creando uno sprite di immagini

In modo analogo alla creazione di un bundle di file JavaScript e CSS, è possibile combinare molte piccole icone e altre immagini comuni in un foglio sprite più grande e quindi usare CSS per visualizzare le singole immagini. Invece di scaricare ogni singola immagine, il Web browser scarica il foglio sprite una sola volta e quindi lo memorizza nella cache del computer locale. Vengono così migliorate le prestazioni per il caricamento delle pagine riducendo il numero di download e il tempo di round trip al server Web.

Per creare uno sprite di immagini in Web Essentials

  1. In Visual Studio aprire Esplora soluzioni e selezionare i file da 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:

    Aggiungere altre pagine a un blocco appunti.
  3. Scegliere un 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 sprite PNG e il file XML .sprite corrispondente.

    Più schemi diapositiva

    Screenshot di un file XML sprite

Amplia le tue competenze
Esplora i corsi di formazione
Ottieni in anticipo le nuove caratteristiche
Partecipa al programma Office Insider

Queste informazioni sono risultate utili?

Grazie per i tuoi commenti e suggerimenti

Grazie per il tuo feedback! Potrebbe essere utile metterti in contatto con uno dei nostri operatori del supporto di Office.

×