Minifikacija i grupisanje u usluzi SharePoint Online

Ovaj članak opisuje kako da koristite tehnike minifikacije i grupisanja pomoću softvera Web Essentials kako biste smanjili broj HTTP zahteva i skratili vreme potrebno za učitavanje stranica u usluzi SharePoint Online.

Kada prilagodite veb sajt, možete da dodate previše dodatnih datoteka na server da biste podržali prilagođavanje. Dodavanje dodatnih JavaScript, CSS i slika povećava broj HTTP zahteva serveru usled čega se produžava vreme neophodno za prikaz veb stranice. Ako imate više datoteka istog tipa, možete da ih grupišete kako biste ubrzali njihovo preuzimanje.

Za JavaScript i CSS datoteke možete i da koristite pristup koji se zove minifikacija, pri čemu smanjujete ukupnu veličinu datoteka tako što uklanjate razmak i ostale znakove koji nisu neophodni.

Minifikacija i grupisanje JavaScript i CSS datoteka pomoću softvera Web Essentials

Softver nezavisnih proizvođača, kao što je Web Essentials, možete da koristite da biste grupisali CSS i JavaScript datoteke.

Važno : Web Essentials je open-source projekat nezavisnog proizvođača zasnovan na zajednici. Softver je proširenje programa Visual Studio 2012 i Visual Studio 2013 ne podržava ga korporacija Microsoft. Da biste preuzeli Web Essentials, posetite veb sajt na adresi http://vswebessentials.com/download.

Web Essentials nudi dva oblika grupisanja:

  • .bundle: za CSS i JavaScript datoteke

  • .sprite: za slike (dostupno samo u programu Visual Studio 2013)

Web Essentials možete da koristite ako imate postojeću funkciju sa nekim elementima logotipa na koje se upućuje unutar prilagođene master stranice, na primer:

Snimak ekrana elementa brenda na prilagođenoj master stranici

Da biste napravili JavaScript i CSS komplet u softveru Web Essentials

  1. U programu Visual Studio, u istraživaču rešenja izaberite datoteke koje želite da uključite u komplet.

  2. Kliknite desnim tasterom miša na izabrane datoteke, a zatim izaberite stavke Web Essentials > Napravi datoteku JavaScript kompleta iz kontekstualnog menija. Na primer:

    Snimak ekrana koji prikazuje opcije menija „Web Essentials“

Prikaz rezultata grupisanja JavaScript i CSS datoteka

Kada napravite JavaScript i CSS komplet, Web Essentials pravi XML datoteku pod imenom datoteka recepta koja identifikuje JavaScript i CSS datoteke, kao i neke druge informacije o konfiguraciji:

Snimak ekrana JavaScript i CSS datoteka recepata

Pored toga, ako je zastavica minifikacije postavljena na vrednost „true“ u receptu za grupisanje, datotekama se smanjuje veličina pored toga što se grupišu. To znači da se prave nove, minifikovane verzije JavaScript datoteka na koje možete da upućujete na master stranici.

Snimak ekrana oznake umanjivanja postavljene na true

Kada učitate stranicu sa veb sajta, možete da koristite alatke za programere iz veb pregledača, kao što je Internet Explorer 11, da biste videli broj zahteva poslatih serveru i koliko dugo se svaka datoteka učitavala.

Sledeća slika predstavlja rezultat učitavanja JavaScript i CSS datoteka pre minifikacije.

Snimak ekrana koji prikazuje 80 stavki koje se preuzimaju

Posle grupisanja CSS i JavaScript datoteka, broj zahteva pao je na 74 i svaki zahtev trajao je samo malo duže od preuzimanja originalnih datoteka pojedinačno:

Snimak ekrana koji prikazuje 74 stavke koje se preuzimaju

Posle grupisanja, datoteka JavaScript kompleta značajno je smanjena sa 815 kB na 365 kB:

Snimak ekrana koji prikazuje smanjenu veličinu preuzimanja

Grupisanje slika pravljenjem niza slika

Slično kao što grupišete JavaScript i CSS datoteke, možete da kombinujete mnogo malih ikona i drugih uobičajenih slika u veći list sa nizom slika, a zatim da koristite CSS da biste otkrili pojedinačne slike. Umesto da preuzima svaku sliku pojedinačno, veb pregledač korisnika jednom preuzima list sa nizom, a zatim ga kešira na lokalnom računaru. To poboljšava performanse učitavanja stranice tako što smanjuje broj preuzimanja i povratnih poziva veb servera.

Da biste napravili niz slika u softveru Web Essentials

  1. U programu Visual Studio, u istraživaču rešenja izaberite datoteke koje želite da uključite u komplet.

  2. Kliknite desnim tasterom miša na izabrane datoteke, a zatim izaberite stavke Web Essentials > Napravi niz slika iz kontekstualnog menija. Na primer:

    Snimak ekrana koji pokazuje kako da kreirate sprajt slike
  3. Odaberite lokaciju za čuvanje datoteke niza. .sprite datoteka je XML datoteka koja opisuje postavke i datoteke u nizu. Sledeće slike prikazuju primer PNG datoteke niza i njene odgovarajuće .sprite XML datoteke.

    Snimak ekrana sprajt datoteke

    Snimak ekrana sprajt XML datoteke

Unapredite veštine
Istražite obuku
Prvi nabavite nove funkcije
Pridružite se Office Insider korisnicima

Da li su vam ove informacije koristile?

Hvala vam na povratnim informacijama!

Hvala za povratne informacije! Zvuči da će biti od pomoći ako vas povežemo sa našim agentima Office podrške.

×