Vähendamine ja komplekteerimine SharePoint Online’is

Selles artiklis kirjeldatakse, kuidas kasutada Web Essentialsis vähendamis- ja komplekteerimistehnikaid, et vähendada HTTP-päringute arvu ja kiirendada SharePoint Online‘is lehtede laadimist.

Võimalik, et peate veebisaiti kohandades serverisse lisama palju täiendavaid faile, et kohandus õigesti töötaks. JavaScripti, CSS ja piltide lisamisel suureneb HTTP-päringute arv, mis omakorda pikendab veebilehe kuvamiseks kuluvat aega. Kui teil on mitu sama tüüpi faili, saate need allalaadimise kiirendamiseks komplekteerida.

Samuti saate JavaScripti ja CSS-i faile vähendada, mis tähendab, et failide kogumahu vähendamiseks eemaldatakse tühikud ja muud ebavajalikud märgid.

Web Essentialsis JavaScripti ja CSS-i failide vähendamine ja komplekteerimine

Saate CSS-i ja JavaScripti faile komplekteerida muu tootja tarkvara abil (nt Web Essentials).

NB! : Web Essentials on muu tootja avatud lähtekoodiga kogukonnapõhine projekt. Tarkvara on platvormide Visual Studio 2012 ja Visual Studio 2013 laiendus, millele Microsoft tuge ei paku. Web Essentialsi allalaadimiseks külastage veebisaiti http://vswebessentials.com/download.

Web Essentials pakub kahte tüüpi komplekteerimisvõimalusi:

  • .bundle CSS-i ja JavaScripti failide jaoks,

  • .sprite piltide jaoks (saadaval ainult platvormil Visual Studio 2013)

Saate Web Essentialsi kasutada juhul, kui teil on juba olemas mõni kaubamärgi alla kuuluv funktsiooni, millele kohandatud juhtlehel viidatakse, nagu näiteks siin:

Kuvatõmmis kaubamärgielemendist kohandatud juhtlehel

JavaScripti ja CSS-i komplekti loomine Web Essentialsis

  1. Valige Visual Studio Solution Exploreris failid, mille soovite komplekteerida.

  2. Paremklõpsake valitud faile ja seejärel valige kontekstimenüüst Web Essentials > Create JavaScript bundle file (Loo JavaScripti komplekt). Siin on mõned näited:

    Kuvatõmmis Web Essentialsi menüüvalikutest

Komplekteeritud JavaScripti ja CSS-i failide vaatamine

Kui loote JavaScripti ja CSS-i failide kogumi, loob Web Essentials XML-faili ehk retseptifaili, mis tuvastab JavaScripti ja CSS-i failid ja muud konfiguratsiooniandmed:

Kuvatõmmis JavaScripti ja CSS-i retseptifailist

Kui vähendamisfunktsiooni lipp on komplekteerimisretseptis tõese väärtusega, vähendatakse failide mahtu lisaks komplekteerimisele. See tähendab, et JavaScripti failidest loodi uued vähendatu mahuga versioonid, millele saate juhtlehel viidata.

Kuvatõmmis vähendamisfunktsiooni tõese väärtusega lipust

Veebisaidi lehte laadides saate kasutada oma brauseri (nt Internet Explorer 11) arendusriistu, et vaadata serverile saadetud päringute arvu ja iga faili laadimiseks kulunud aega.

Järgmisel joonisel on kujutatud vähendamata JavaScripti ja CSS-i failide laadimise tulemus.

Kuvatõmmis 80 pildi allalaadimisest

Pärast CSS-i ja JavaScripti failide komplekteerimist vähenes päringute arv 74-ni ning iga faili allalaadimiseks kulus kõigest natuke kauem kui algsete failide eraldi allalaadimiseks.

Kuvatõmmis 74 pildi allalaadimisest

Pärast komplekteerimist on JavaScripti komplekti maht 365 KB, mis on algsest 815 KB-st oluliselt väiksem.

Kuvatõmmis vähendatud mahuga allalaaditavast failist

Piltide komplekteerimiseks spraidi loomine

Nagu JavaScripti ja CSS-i failid, saab ka väikesed ikoonid ja muud sagedamini kasutatavad pildid koguda suurele spraidilehele ja need hiljem CSS-i abil eraldi kuvada. Piltide ükshaaval allalaadimise asemel laadib kasutaja veebibrauser kogu spraidilehe alla ja salvestab selle kohaliku arvuti vahemällu. See aitab parandada lehe laadimise kiirust, sest allalaaditavaid faile ja serveri poole pöördumisi on vähem.

Pildispraidi loomine Web Essentialsis

  1. Valige Visual Studio Solution Exploreris failid, mille soovite komplekteerida.

  2. Paremklõpsake valitud faile ja seejärel valige kontekstimenüüst Web Essentials > Create image sprite (Loo pildisprait). Siin on mõned näited:

    Kuvatõmmis pildispraidi loomisest
  3. Valige spraidifaili salvestuskoht. SPRITE-fail on XML-fail, mis kirjeldab spraidis olevaid sätteid ja faile. Järgmisel pildil on toodud näide PNG-vormingus spraidist ja sellele vastavast XML-vormingus failist.

    Kuvatõmmis spraidifailist

    Kuvatõmmis XML-spraidifailist

Täiendage oma oskusi
Tutvuge koolitusmaterjalidega
Kasutage uusi funktsioone enne teisi
Liituge Office Insideri programmiga

Kas sellest teabest oli abi?

Täname tagasiside eest!

Täname tagasiside eest! Tundub, et võiksime teid kokku viia ühega meie Office'i tugiagentidest, kes aitab teil probleemi lahendada.

×