Minifikacija i grupiranje u sustavu SharePoint Online

U ovom se članku opisuje kako postupcima minifikacije i grupiranja pomoću softvera Web Essentials smanjiti broj HTTP zahtjeva i skratiti vrijeme učitavanja stranica u sustavu SharePoint Online.

Prilikom prilagodbe web-mjesta na poslužitelj biste mogli dodati veliku količinu dodatnih datoteka za podršku prilagodbi. Dodavanjem dodatnih JavaScript, CSS i slikovnih datoteka povećava se broj HTTP zahtjeva poslužitelju, čime se produljuje vrijeme potrebno da se prikaže web-stranica. Ako imate više datoteka iste vrste, možete ih grupirati da biste ubrzali njihovo preuzimanje.

Za JavaScript i CSS datoteke možete koristiti i pristup pod nazivom minifikacija, kojim se smanjuje ukupna veličina datoteka uklanjanjem razmaka i drugih nepotrebnih znakova.

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

CSS i JavaScript datoteke možete grupirati pomoću softvera drugih proizvođača, npr. pomoću softvera Web Essentials.

Važno : Web Essentials neovisni je projekt otvorenog koda s podrškom iz zajednice. Taj je softver proširenje programa Visual Studio 2012 i Visual Studio 2013 i ne podržava ga Microsoft. Da biste preuzeli Web Essentials, posjetite web-mjesto na adresi http://vswebessentials.com/download.

Web Essentials nudi dva načina grupiranja:

  • .bundle: za CSS i JavaScript datoteke

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

Web Essentials možete koristiti ako imate postojeću značajku s elementima brendiranja koji su referencirani unutar prilagođene osnovne stranice, npr.:

eNom-Configure-1-3

Stvaranje kompleta TE000127218 i CSS datoteka u softveru Web Essentials

  1. U programu Visual Studio u pregledniku rješenja odaberite datoteke koje želite uvrstiti u komplet.

  2. Desnom tipkom miša kliknite odabrane datoteke, a zatim na kontekstnom izborniku odaberite Web Essentials > Stvori JavaScript datoteku kompleta. Na primjer:

    Snimka zaslona s prikazom mogućnosti izbornika na servisu Web Essentials

Prikaz rezultata grupiranja JavaScript i CSS datoteka

Prilikom stvaranja kompleta JavaScript i CSS datoteka Web Essentials stvara XML datoteku pod nazivom datoteka recepta, u kojoj su navedene JavaScript i CSS datoteke te još neki podaci o konfiguraciji:

Alatna traka za brzi pristup u gornjem lijevom kutu (zadano mjesto)

Uz to, ako je u receptu za grupiranje oznaka minficiranja postavljena na true, datoteke ne samo što se grupiraju, već im se i smanjuje veličina. To znači da se stvaraju nove minficirane verzije JavaScript datoteka koje možete referencirati na osnovnoj stranici.

Dijaloški okvir Dodavanje novog računa koji prikazuje da se račun ne može konfigurirati

Kada učitate stranicu s web-mjesta, pomoću alata za razvojne inženjere u web-pregledniku, kao što je Internet Explorer 11, možete pogledati podatke o broju zahtjeva poslanih poslužitelju i trajanju učitavanja svake datoteke.

Sljedeća slika pokazuje rezultat učitavanja JavaScript i CSS datoteka prije minifikacije.

Grupa Broj na kartici Polazno

Nakon grupiranja CSS i JavaScript datoteka broj zahtjeva smanjio se na 74 i preuzimanje svake datoteke trajalo je tek neznatno dulje od preuzimanja izvornih datoteka:

Snimka zaslona koja prikazuje da se preuzimaju 74 stavke

Nakon grupiranja JavaScript datoteka kompleta znatno je smanjena s 815 kB na 365 kB:

Snimka zaslona koja prikazuje smanjenu veličinu preuzimanja

Grupiranje slika stvaranjem niza slika

Slično grupiranju JavaScript i CSS datoteka, veliki malih ikona i drugih uobičajenih slika možete objediniti u veći list s nizom slika, a zatim pomoću CSS-a otkriti pojedinačne slike. Umjesto preuzimanja svake pojedinačne slike, korisnikov web-preglednik jedanput preuzima list s nizom slika, a zatim ga predmemorira na lokalnom računalu. Time se ubrzava učitavanje stranice jer se smanjuje broj preuzimanja i pristupa web-poslužitelju.

Stvaranje niza slika u softveru Web Essentials

  1. U programu Visual Studio u pregledniku rješenja odaberite datoteke koje želite uvrstiti u komplet.

  2. Desnom tipkom miša kliknite odabrane datoteke, a zatim na kontekstnom izborniku odaberite Web Essentials > Stvori niz slika. Na primjer:

    Dodajte više stranica u bilježnice.
  3. Odaberite mjesto na koje želite spremiti datoteku niza slika. .sprite datoteka je XML datoteke koja opisuje postavke i datoteke u nizu slika. Na slikama u nastavku prikazan je primjer PNG datoteke s nizom slika i pripadajuća .sprite XML datoteka.

    Više matrica slajdova

    Snimka zaslona sprajt XML datoteke

Proširite svoje vještine
Istražite osposobljavanje

Jesu li vam ove informacije bile korisne?

Hvala vam na povratnim informacijama!

Hvala vam na povratnim informacijama! Čini se da bi vam pomoglo kad bismo vas povezali s nekim od naših agenata podrške za Office.

×