Minimizarea și gruparea în SharePoint Online

Acest articol descrie cum se utilizează tehnicile de minimizare și grupare cu Web Essentials pentru a reduce numărul de solicitări HTTP și a reduce timpul necesar pentru a încărca paginile în SharePoint Online.

Atunci când vă particularizați site-ul, puteți adăuga un număr mare de fișiere suplimentare pe server pentru a accepta particularizarea. Adăugarea de JavaScript, CSS și imagini suplimentare mărește numărul de solicitări HTTP pentru server, mărind timpul necesar pentru a afișa o pagină web. Dacă aveți mai multe fișiere de același tip, le puteți grupa pentru a le descărca mai rapid.

Pentru fișierele JavaScript și CSS, puteți utiliza o abordare numită minimizare, în care reduceți dimensiunea totală a fișierelor prin eliminarea spațiilor albe și a altor caractere care nu sunt necesare.

Minimizarea și gruparea fișierelor JavaScript și CSS cu Web Essentials

Puteți utiliza software de la terți, cum ar fi Web Essentials, pentru a grupa fișierele CSS și JavaScript.

Important : Web Essentials este un proiect de la terți, open-source, bazat pe comunitate. Software-ul este o extensie Visual Studio 2012 și Visual Studio 2013 și nu este acceptat de Microsoft. Pentru a descărca Web Essentials, vizitați site-ul la http://vswebessentials.com/download.

Web Essentials oferă două forme de grupare:

  • .bundle: pentru fișiere CSS și JavaScript

  • .sprite: pentru imagini (disponibil doar în Visual Studio 2013)

Puteți utiliza Web Essentials, dacă aveți o caracteristică existentă, cu elemente de branding la care se face referire într-o pagină coordonatoare particularizată, cum ar fi:

Captură de ecran cu elementul de brand din pagina coordonatoare particularizată

Pentru a crea un pachet TE000127218 și CSS în Web Essentials

  1. În Visual Studio, în Solution Explorer, selectați fișierele pe care doriți să le includeți în pachet.

  2. Faceți clic dreapta pe fișierele selectate, apoi selectați Web Essentials > Create JavaScript bundle file din meniul contextual. De exemplu:

    Captură de ecran care afișează opțiunile de meniu Web Essentials

Vizualizarea rezultatelor grupării fișierelor CSS și JavaScript

Atunci când creați un pachet JavaScript și CSS, Web Essentials creează un fișier XML numit fișier rețetă, care identifică fișierele JavaScript și CSS, precum și alte informații de configurare:

Captură de ecran cu fișierul de rețete JavaScript și CSS

În plus, dacă semnalizarea de minimizare este setată la true în rețeta de grupare, fișierele sunt reduse în dimensiune și grupate. Acest lucru înseamnă că s-au creat versiuni noi, minimizate ale fișierelor JavaScript la care puteți face referire în pagina coordonatoare.

Captură de ecran cu semnalizarea de minimizare setată la true

Atunci când încărcați o pagină de pe site-ul web, puteți utiliza instrumentele de dezvoltator din browserul web, cum ar fi Internet Explorer 11, pentru a vedea numărul de solicitări trimise către server și cât a durat încărcarea fiecărui fișier.

Ilustrația următoare este rezultatul încărcării fișierelor JavaScript și CSS înainte de minimizare.

Captură de ecran care afișează 80 de elemente descărcate

După gruparea fișierelor CSS și JavaScript, numărul de solicitări a scăzut la 74 și descărcarea individuală a fiecărui fișier a durat doar cu puțin mai mult decât cea a fișierelor originale:

Captură de ecran care afișează 74 de elemente descărcate

După grupare, fișierul pachet JavaScript se reduce semnificativ, de la 815 KB la 365 KB:

Captură de ecran care afișează dimensiunea redusă a descărcării

Gruparea imaginilor, creând un fișier sprite imagine

Similar cu modul în care grupați fișiere JavaScript și CSS, puteți combina mai multe pictograme mici și alte imagini uzuale într-o foaie sprite mai mare, apoi puteți utiliza CSS pentru a afișa imaginile individuale. În loc să descarce fiecare imagine individuală, browserul web al utilizatorului descarcă foaia sprite o dată, apoi o memorează în cache pe computerul local. Acest lucru îmbunătățește performanța de încărcare a paginilor, reducând numărul de descărcări și de transferuri la serverul web.

Pentru a crea un fișier sprite imagine în Web Essentials

  1. În Visual Studio, în Solution Explorer, selectați fișierele pe care doriți să le includeți în pachet.

  2. Faceți clic dreapta pe fișierele selectate, apoi selectați Web Essentials > Create image sprite din meniul contextual. De exemplu:

    Captură de ecran care arată cum se creează un fișier sprite imagine
  3. Alegeți o locație pentru a salva fișierul sprite. Fișierul .sprite este un fișier XML care descrie setările și fișierele din sprite. Următoarele ilustrații arată un exemplu de fișier PNG sprite și fișierul său corespunzător XML .sprite.

    Captură de ecran cu un fișier sprite

    Captură de ecran care afișează a fișierului XML

Extindeți-vă competențele
Explorați instruirea
Fiți primul care obține noile caracteristici
Alăturați-vă utilizatorilor Office Insider

Au fost utile aceste informații?

Vă mulțumim pentru feedback!

Vă mulțumim pentru feedback! Se pare că ar fi util să luați legătura cu unul dintre agenții noștri de asistență Office.

×