Minimiziranje in povezovanje v SharePoint Onlineu

V tem članku je opisano, kako uporabljati tehnike zmanjševanja in združevanja z razširitvijo Web Essentials za zmanjšanje števila zahtev HTTP in skrajšanje časa nalaganja strani v SharePoint Online.

Ko prilagodite spletno mesto, se lahko zgodi, da dodate v strežnik veliko dodatnih datotek, ki podpirajo prilagoditev. Z dodajanjem dodatnih JavaScript, datotek CSS in slik se poveča število zahtev HTTP v strežniku, posledično pa se podaljša tudi čas za prikaz spletne strani. Če imate več datotek iste vrste, jih lahko združite in tako omogočite hitrejši prenos datotek.

Za JavaScript in datoteke CSS lahko uporabite pristop, ki se imenuje zmanjševanje, s katerim boste zmanjšali skupno velikost datotek, tako da boste odstranili presledke in druge nepotrebne znake.

Zmanjševanje in združevanje datotek JavaScript in datotek CSS z razširitvijo Web Essentials

Za združevanje datotek CSS in datotek JavaScript lahko uporabite programsko opremo drugega ponudnika, na primer razširitev Web Essentials.

Pomembno : Web Essentials je odprtokodni projekt drugega ponudnika, ki temelji na skupnosti. Programska oprema je razširitev za Visual Studio 2012 in Visual Studio 2013, ki je Microsoft ne podpira. Če želite prenesti razširitev Web Essentials, obiščite spletno mesto http://vswebessentials.com/download.

Razširitev Web Essentials omogoča dve vrsti združevanja:

  • .bundle: za datoteke CSS in datoteke JavaScript

  • .sprite: za slike (na voljo le v Visual Studio 2013)

Razširitev Web Essentials lahko uporabite, če imate obstoječo funkcijo z nekaterimi elementi blagovne znamke, ki so navedeni na strani z matrico po meri, na primer:

Posnetek zaslona elementa celostne podobe na strani z matrico po meri

Ustvarjanje TE000127218 in svežnja datotek CSS v razširitvi Web Essentials

  1. V programu Visual Studio izberite v raziskovalcu rešitev datoteke, ki jih želite vključiti v sveženj.

  2. Z desno tipko miške kliknite izbrane datoteke in nato v priročnem meniju izberite Web Essentials > Ustvari sveženj datotek JavaScript. Primer:

    Posnetek zaslona, na katerem so prikazane možnosti menija Web Essentials

Ogled rezultatov združevanja JavaScript in datotek CSS

Ko ustvarite JavaScript in sveženj datotek CSS, razširitev Web Essentials ustvari datoteko XML, ki se imenuje datoteka recepta in prepozna JavaScript in datoteke CSS ter nekatere druge informacije o konfiguraciji:

Posnetek zaslona datoteke recepta JavaScript in CSS

Če je zastavica za zmanjšanje v svežnju recepta nastavljena na »true«, se poleg tega zmanjša velikost datotek, hkrati pa so te združene skupaj. To pomeni, da so bile ustvarjene nove, pomanjšane različice datotek JavaScript, na katere se lahko sklicujete na strani z matrico.

Posnetek zaslona, na katerem je prikazana sprememba vrednosti zastavice minify na »true«

Ko prenesete stran s spletnega mesta, lahko uporabite orodja za razvijalce iz spletnega brskalnika, kot je na primer Internet Explorer 11, če si želite ogledati število zahtev, ki so bile poslane v strežnik, in kako dolgo se je posamezna datoteke prenašala.

Na spodnji sliki je prikazan rezultat prenosa JavaScript in datoteke CSS pred zmanjšanjem.

Posnetek zaslona, na katerem je prikazan prenos 80 elementov

Po združitvi datotek CSS in datotek JavaScript je število zahtev padlo na 74 in posamezna datoteka se je prenašala le nekoliko daljši čas od posameznih izvirnih datotek:

Posnetek zaslona, na katerem je prikazan prenos 74 elementov

Po postopku združitve se je velikost datoteke svežnja JavaScript bistveno zmanjšala – iz 815 KB na 365 KB:

Posnetek zaslona, na katerem je prikazana zmanjšana velikost prenosa

Združevanje slik z ustvarjanjem kolaža slik

Podobno kot združite JavaScript in datoteke CSS lahko združite številne majhne ikone in druge pogoste slike v večje kolaže in nato z datoteko CSS odkrijete posamezne slike. Namesto da mora uporabnik prenesti vsako posamezno sliko, spletni brskalnik uporabnika enkrat prenese kolaž in ga nato shrani v predpomnilnik v lokalnem računalniku. Tako se izboljša učinkovitost prenosa strani, saj se zmanjša število prenosov in vrnitev v spletni strežnik.

Ustvarjanje kolaža slik v razširitvi Web Essentials

  1. V programu Visual Studio izberite v raziskovalcu rešitev datoteke, ki jih želite vključiti v sveženj.

  2. Z desno tipko miške kliknite izbrane datoteke in nato v priročnem meniju izberite Web Essentials > Ustvari kolaž slik. Primer:

    Posnetek zaslona, na katerem je prikazan postopek ustvarjanja slike sprite
  3. Izberite mesto, kamor želite shraniti datoteko kolaža. Datoteka .sprite je datoteka XML, ki opisuje nastavitve in datoteke v kolažu. Na slikah je prikazan primer kolaža datoteke PNG in njene ustrezne datoteke XML .sprite.

    Posnetek zaslona datoteke sprite

    Posnetek zaslona datoteke sprite XML

Razširite svoja znanja
Oglejte si izobraževanje
Prvi dobite nove funkcije
Pridružite se programu Office Insider

Vam je bila informacija v pomoč?

Zahvaljujemo se vam za povratne informacije.

Zahvaljujemo se vam za povratne informacije. Videti je, da bi vam prišla prav pomoč enega od naših Officeovih agentov za podporo.

×