Office
Prihlásenie

Zmenšovanie a spájanie v SharePointe Online

Tento článok popisuje, ako používať techniky zmenšovania a spájania s rozšírením Web Essentials na zníženie počtu požiadaviek HTTP a skrátenie času potrebného na načítanie stránok v službe SharePoint Online.

Pri prispôsobovaní webovej lokality môžete nakoniec na podporu prispôsobenia pridať na server veľký počet súborov navyše. Pridanie ďalších súborov JavaScript, CSS a obrázkov zvyšuje počet požiadaviek HTTP na server, čím sa predlžuje čas potrebný na zobrazenie webovej stránky. Ak máte viacero súborov rovnakého typu, môžete tieto súbory spojiť, aby sa sťahovali rýchlejšie.

V prípade súborov JavaScript a CSS môžete použiť aj prístup s názvom zmenšovanie, pomocou ktorého môžete znížiť celkovú veľkosť súborov odstránením prázdnych znakov a ostatných nepotrebných znakov.

Zmenšovanie a spájanie súborov JavaScript a CSS s rozšírením Web Essentials

Na spájanie súborov CSS a JavaScript môžete použiť softvér tretej strany, napríklad Web Essentials.

Dôležité: Web Essentials komunitný open-source projekt tretej strany. Tento softvér je rozšírením programu Visual Studio 2012 a Visual Studio 2013 a nie je podporovaný spoločnosťou Microsoft. Ak chcete stiahnuť Web Essentials, navštívte webovú lokalitu http://vswebessentials.com/download.

Web Essentials ponúka dve formy spájania:

  • .bundle: pre súbory CSS a JavaScript,

  • .sprite: pre obrázky (k dispozícii len v programe Visual Studio 2013).

Web Essentials môžete použiť, ak máte existujúcu funkciu s prvkami firemnej identity, na ktoré sa odkazuje vo vnútri vlastnej predlohy, napríklad:

eNom-konfigurácia-1-3

Vytvorenie spojenia súborov TE000127218 a CSS v rozšírení Web Essentials

  1. V programe Visual Studio, v Prieskumníkovi riešení, vyberte súbory, ktoré chcete zahrnúť do balíka.

  2. Kliknite pravým tlačidlom myši na vybraté súbory a potom z kontextovej ponuky vyberte položky Web Essentials > Create JavaScript bundle file (Vytvoriť balík súborov JavaScript). Príklad:

    Snímka obrazovky zobrazujúca možnosti ponuky rozšírenia Web Essentials

Zobrazenie výsledkov spájania súborov JavaScript a CSS

Pri vytváraní balíka súborov JavaScript a CSS rozšírenie Web Essentials vytvorí XML súbor označovaný ako súbor s návodom, ktorý identifikuje súbory JavaScript a CSS a obsahuje aj ďalšie informácie o konfigurácii:

Predvolené umiestnenie panela s nástrojmi Rýchly prístup

Okrem toho, ak je príznak zmenšenia v návode na spájanie nastavený na hodnotu true, okrem spojenia sa súbory aj zmenšia. To znamená, že boli vytvorené nové, zmenšené verzie súborov JavaScript, na ktoré môžete odkazovať v predlohe.

Snímka obrazovky s príznakom zmenšenia nastaveným na hodnotu true

Po načítaní stránky z webovej lokality môžete pomocou vývojárskych nástrojov webového prehliadača, ako je napríklad Internet Explorer 11, zobraziť počet žiadostí odoslaných na server a informáciu, ako dlho trvalo načítanie každého súboru.

Nasledujúci obrázok je výsledkom načítania súborov JavaScript a CSS pred zmenšením.

Skupina Číslo na karte Domov

Po spojení súborov CSS a JavaScript klesol počet žiadostí na 74 a načítanie jednotlivých súborov trvalo iba o trochu dlhšie ako stiahnutie pôvodných súborov jednotlivo:

Snímka obrazovky zobrazujúca 74 sťahovaných položiek

Po spojení sa veľkosť balíka súborov JavaScript výrazne znížila z 815 kB na 365 kB:

Snímka obrazovky zobrazujúca zmenšenú veľkosť sťahovaného súboru

Spájanie obrázkov vytvorením zloženého obrázka

Podobne ako pri spájaní súborov JavaScript a CSS môžete spojiť veľa malých ikon a ďalších bežných obrázkov do väčšieho zloženého hárka a potom použiť súbor CSS na odhalenie jednotlivých obrázkov. Namiesto sťahovania obrázkov po jednom stiahne webový prehliadač používateľa celý zložený hárok naraz a potom ho uloží do vyrovnávacej pamäte v lokálnom počítači. To zlepšuje výkon pri načítavaní stránok tým, že znižuje počet stiahnutí a výmenu údajov s webovým serverom.

Vytvorenie zloženého obrázka v rozšírení Web Essentials

  1. Vo Visual Studiu, v Prieskumníkovi riešení, vyberte súbory, ktoré chcete zahrnúť do balíka.

  2. Kliknite pravým tlačidlom myši na vybraté súbory a potom v kontextovej ponuke vyberte položky Web Essentials > Create image sprite (Vytvoriť zložený obrázok). Príklad:

    Pridajte do poznámkového bloku viac strán.
  3. Vyberte umiestnenie na uloženie zloženého súboru. Súbor .sprite je súbor XML, ktorý popisuje nastavenia a súbory v zloženom súbore. Nasledujúce obrázky ukazujú príklad zloženého súboru PNG a jeho príslušného súboru XML typu .sprite.

    Viaceré predlohy snímky

    Snímka obrazovky so zloženým súborom XML

Rozšírte svoje zručnosti práce s balíkom Office
Preskúmať školenie
Buďte medzi prvými, ktorí získajú nové funkcie
Pridajte sa k insiderom pre Office

Boli tieto informácie užitočné?

Ďakujeme za vaše pripomienky!

Ďakujeme vám za pripomienky. Pravdepodobne vám pomôže, ak vás spojíme s pracovníkom podpory pre Office.

×