Minifikace a sdružování v SharePointu
Tento článek popisuje, jak pomocí technik minifikace a sdružování s webovými Essentials snížit počet požadavků HTTP a zkrátit dobu potřebnou k načtení stránek v SharePointu.
Když přizpůsobíte web, můžete na server přidat velký počet dalších souborů, které budou podporovat přizpůsobení. Přidáním dodatečného JavaScriptu, šablon stylů CSS a obrázků se zvýší počet požadavků HTTP na server, což zase zvyšuje dobu potřebnou k zobrazení webové stránky. Pokud máte více souborů stejného typu, můžete je seskupit, aby se tyto soubory stahovaly rychleji.
U souborů JavaScriptu a CSS můžete také použít přístup označovaný jako minifikace, kdy zmenšíte celkovou velikost souborů odebráním prázdných znaků a dalších znaků, které nejsou potřeba.
Minifikace a sdružování javascriptových souborů a souborů CSS s webovými Essentials
K balení souborů CSS a JavaScriptu můžete použít software třetích stran, jako je například Webová Essentials.
Důležité
Web Essentials je opensourcový projekt třetí strany založený na komunitě. Software je rozšířením sady Visual Studio 2012 a Visual Studio 2013 a Microsoft ho nepodporuje. Pokud si chcete stáhnout webovou Essentials, navštivte webovou stránku Web Essentials 2012.
Webové Essentials nabízí dvě formy sdružování:
- .bundle: pro soubory CSS a JavaScript
- .sprite: pro obrázky (dostupné jenom v Visual Studio 2013)
Web Essentials můžete použít, pokud máte existující funkci s některými prvky brandingu, na které odkazuje vlastní stránka předlohy, například:
Vytvoření sady TE000127218 a šablon stylů CSS ve webovém Essentials
V sadě Visual Studio v Průzkumník řešení vyberte soubory, které chcete zahrnout do sady.
Klikněte pravým tlačítkem na vybrané soubory a pak v místní nabídce vyberte Soubor sady javascriptových>Essentials Create. Příklady:
Zobrazení výsledků sdružování souborů JavaScriptu a CSS
Když vytvoříte sadu JavaScriptu a šablon stylů CSS, webová Essentials vytvoří soubor XML označovaný jako soubor receptu, který identifikuje soubory JavaScriptu a CSS a některé další informace o konfiguraci:
Pokud je navíc příznak minify v receptu na sdružování nastavený na hodnotu true, soubory se zmenší a sbalí dohromady. To znamená, že byly vytvořeny nové, minifikované verze souborů JavaScriptu, na které můžete odkazovat na stránce předlohy.
Když načtete stránku z webu, můžete pomocí vývojářských nástrojů z webového prohlížeče, jako je Internet Explorer 11, zjistit počet požadavků odeslaných na server a jak dlouho trvalo načtení jednotlivých souborů.
Následující obrázek je výsledkem načtení souborů JavaScriptu a CSS před minifikace.
Po sloučení souborů CSS a JavaScriptu se počet požadavků snížil na 74 a stažení jednotlivých souborů trvalo jen o něco déle než původní soubory:
Po sloučení se soubor sady JavaScriptu výrazně zmenší z 815 kB na 365 kB:
Sdružování imagí vytvořením spritu image
Podobně jako soubory JavaScriptu a CSS můžete zkombinovat mnoho malých ikon a dalších běžných obrázků do většího spritového listu a pak pomocí šablon stylů CSS zobrazit jednotlivé obrázky. Místo stažení jednotlivých obrázků webový prohlížeč uživatele stáhne list spritu jednou a pak ho uloží do mezipaměti na místním počítači. Tím se zlepší výkon načítání stránky snížením počtu stažených souborů a odezvy na webový server.
Vytvoření spritu image ve webovém Essentials**
V sadě Visual Studio v Průzkumník řešení vyberte soubory, které chcete zahrnout do sady.
Klikněte pravým tlačítkem na vybrané soubory a pak v místní nabídce vyberte Web Essentials>Create image sprite. Příklady:
Zvolte umístění, do které chcete soubor spritu uložit. Soubor .sprite je soubor XML, který popisuje nastavení a soubory v spritu. Následující obrázky znázorňují příklad souboru PNG sprite a jeho odpovídajícího souboru XML .sprite.
