Mažinimas ir susiejimas programoje „SharePoint Online“

Šiame straipsnyje paaiškinta, kaip naudoti mažinimo ir grupavimo technikas su „Web Essentials“, kad sumažintumėte HTTP užklausų skaičių ir sutrumpintumėte puslapių įkėlimo „SharePoint Online“ laiką.

Tinkinant svetainę gali prireikti įtraukti į serverį daug papildomų failų, kad būtų palaikomi tinkinimai. Įtraukiant papildomus JavaScript, CSS ir vaizdus padidinamas HTTP serverio užklausų skaičius, todėl pailgėja tinklalapio rodymui būtinas laikas. Jei turite kelis to paties tipo failus, galima sugrupuoti šiuos failus, kad jis būtų greičiau atsiunčiami.

„JavaScript“ ir CSS failams taip pat galima naudoti būdą, vadinamą mažinimu, kai mažinamas bendras failų dydis pašalinant tarpus ir kitus nebūtinus simbolius.

JavaScript mažinimas ir grupavimas bei CSS failai su „Web Essentials“

Galima naudoti trečiųjų šalių programinę įrangą, pvz., „Web Essentials“, ir grupuoti CSS bei „JavaScript“ failus.

Svarbu : „Web Essentials“ yra trečiosios šalies, atvirojo kodo, bendruomene pagrįstas projektas. Programinė įranga yra „Visual Studio 2012“ ir „Visual Studio 2013“ plėtinys, ir „Microsoft“ jos nepalaiko. Norėdami atsisiųsti „Web Essentials“, apsilankykite svetainėje http://vswebessentials.com/download.

„Web Essentials“ teikia dvi grupavimo galimybes:

  • .bundle: CSS ir „JavaScript“ failams

  • .sprite: vaizdams (pasiekiama tik „Visual Studio 2013“)

„Web Essentials“ galima naudoti, jei turite funkciją su tam tikrais prekių žymėjimo elementais, nurodytais pasirinktiniame puslapio šablone, pvz.,

Prekės ženklą elemento pasirinktiniame puslapio šablone ekrano kopija

TE000127218 ir CSS paketų kūrimas naudojant „Web Essentials“

  1. „Visual Studio“ naudodami „Solution Explorer“ pasirinkite failus, kuriuos norite įtraukti į paketą.

  2. Dešiniuoju pelės mygtuku spustelėkite pasirinktus failus, tada kontekstiniame meniu pasirinkite Web Essentials > Kurti „JavaScript“ paketo failą. Pavyzdžiui:

    Ekrano kopija su „Web Essentials“ meniu parinktimis

„JavaScript“ ir CSS failų grupavimo rezultatai

Kuriant „JavaScript“ ir CSS paketą, „Web Essentials“ sukuria XML failą, pavadintą receptų failas , kuris identifikuoja „JavaScript“ ir CSS failus ir kai kurią kitą konfigūracijos informaciją:

„JavaScript“ ir CSS receptų failo ekrano kopija

Be to, jei mažinimo vėliavėlė grupavimo nurodyme nustatyta kaip teisinga, failai mažinami ir grupuojami. Tai reiškia, kad buvo sukurtos naujos, sumažintos „JavaScript“ failų versijos, kurias galima nurodyti puslapio šablone.

Lauko Mažinti vėliavėlę, nustatyto kaip TRUE (teisinga), ekrano kopija

Įkeliant puslapį iš žiniatinklio svetainės galima naudoti žiniatinklio naršyklės kūrėjų įrankius, pvz., „Internet Explorer 11“, kad peržiūrėtumėte į serverį siunčiamų užklausų skaičių ir kiekvieno failo įkėlimo laiką.

Tolesnis paveikslėlis yra „JavaScript“ ir CSS failų įkėlimo prieš mažinimą rezultatas.

Ekrano kopija, kurioje rodoma, kad atsisiųsta 80 elementų

Atlikus CSS ir „JavaScript“ failų grupavimą, užklausų skaičius sumažėjo iki 74 ir kiekvieną failą atsisiųsti truko tik šiek tiek ilgiau negu originalius failus:

Ekrano kopija, kurioje rodoma, kad atsisiųsti 74 elementai

Atlikus grupavimą „JavaScript“ paketo failas ženkliai sumažintas nuo 815 KB iki 365 KB:

Ekrano kopija, kurioje rodomas sumažinto atsisiųsti skirto failo dydis

Vaizdų grupavimas kuriant vaizdų kaupinį

Panašiai kaip grupuojant „JavaScript“ ir CSS failus, galima sujungti daug nedidelių piktogramų ir kitų bendrų vaizdų į didesnį kaupinio lapą, tada naudoti CSSm kad būtų galima peržiūrėti atskirus vaizdus. Vietoje to, kad būtų atsisiunčiami atskiri vaizdai, vartotojo žiniatinklio naršyklė vieną kartą atsisiunčia kaupinio lapą, tada įkelia jį į kompiuterio talpyklą. Taip padidinamas puslapio įkėlimo efektyvumas, nes sumažinamas atskirų atsisiuntimų skaičius ir kreipinių į žiniatinklio serverį skaičius.

Vaizdų kaupinio kūrimas naudojant „Web Essentials“

  1. „Visual Studio“ naudodami „Solution Explorer“ pasirinkite failus, kuriuos norite įtraukti į paketą.

  2. Dešiniuoju pelės mygtuku spustelėkite pasirinktus failus, tada kontekstiniame meniu pasirinkite Web Essentials > Kurti vaizdų kaupinį. Pavyzdžiui:

    Ekrano kopija, kurioje rodoma, kaip sukurti vaizdo „sprite“ failą
  3. Pasirinkite vietą, kurioje norite įrašyti kaupinio failą. .sprite failas yra XML failas, apibūdinantis kaupinio failų parametrus. Tolesnėse iliustracijose rodomas PNG kaupinio failo ir jo atitinkamo .sprite XML failo pavyzdys.

    „sprite“ failo ekrano kopija.

    „sprite“ XML failo ekrano kopija

Tobulinkite savo įgūdžius
Ieškoti mokymo
Pirmiausia gaukite naujų funkcijų
Prisijunkite prie „Office Insider“ dalyvių

Ar ši informacija buvo naudinga?

Dėkojame už jūsų atsiliepimus!

Dėkojame už jūsų atsiliepimą! Panašu, kad gali būti naudinga jus sujungti su vienu iš mūsų „Office“ palaikymo agentų.

×