Minifikace a sdružování v SharePointu Online

Tento článek popisuje, jak v rozšíření Web Essentials využít techniky minifikace a sdružování, aby se tak snížil počet požadavků HTTP a zrychlilo načítání stránek v SharePoint Online.

Může se stát, že když si chcete upravit webovou stránku, nakonec na server přidáte velký počet souborů, které slouží tomuto přizpůsobení. Když přidáváte další skripty JavaScript, styly CSS a obrázky, zvyšuje se tím počet požadavků HTTP, které přicházejí na server, což následně prodlužuje načítání webových stránek. Pokud máte několik souborů stejného druhu, můžete je sdružit, aby se stahovaly rychleji.

V případě souborů JavaScript a CSS můžete použít také postup, kterému se říká minifikace. Pomocí něj zmenšíte celkovou velikost souborů, protože odeberete mezery a ostatní postradatelné znaky.

Minifikace a sdružování souborů JavaScript a CSS pomocí Web Essentials

Pro sdružení souborů JavaScript a CSS můžete použít software jiného výrobce, jako je například rozšíření Web Essentials.

Důležité : Web Essentials je komunitní open-source projekt třetí strany. Tento software představuje rozšíření aplikace Visual Studio 2012 a Visual Studio 2013 a Microsoft nezajišťuje jeho podporu. Rozšíření Web Essentials si můžete stáhnout na adrese http://vswebessentials.com/download.

Web Essentials nabízí dva způsoby sdružování:

  • .bundle: pro soubory CSS a JavaScript

  • .sprite: pro obrázky (k dispozici jen v sadě Visual Studio 2013)

Rozšíření Web Essentials můžete použít, pokud máte stávající funkci s nějakými prvky firemní identity, na které se odkazuje na přizpůsobené hlavní stránce, například:

Snímek obrazovky s prvkem firemní identity na vlastní stránce předlohy

Vytvoření svazku souborů TE000127218 a CSS v rozšíření Web Essentials

  1. V sadě Visual Studio vyberte v Průzkumníku řešení soubory, které chcete zahrnout do svazku.

  2. Na vybrané soubory klikněte pravým tlačítkem a pak z místní nabídky vyberte Web Essentials > Create JavaScript bundle file (Vytvořit soubor svazku JavaScriptu). Příklady:

    Snímek obrazovky s možnostmi nabídky Web Essentials

Zobrazení výsledků sdružení souborů JavaScript a CSS

Když vytvoříte svazek souborů JavaScript a CSS, Web Essentials vytvoří soubor XML, kterému se říká soubor předpisu a který rozpozná soubory JavaScript a CSS také některé další informace o konfiguraci:

Snímek obrazovky s JavaScriptem a souborem předpisu CSS

Pokud je navíc příznak minifikace v souboru předpisu nastavený na hodnotu true, soubory se zmenší a zároveň se vytvoří svazek. To znamená, že jste vytvořili zmenšenou verzi javascriptových souborů, na které můžete odkazovat z hlavní stránky.

Snímek obrazovky s příznakem minify nastaveným na true

Když načítáte stránku ze svého webu, ve webovém prohlížeči můžete použít nástroje pro vývojáře, jako je třeba Internet Explorer 11, a zkontrolovat počet požadavků odeslaných na server a dobu trvání načtení jednotlivých souborů.

Následující číslo je výsledkem načítání souborů JavaScript a CSS před minifikací.

Snímek obrazovky s 80 stahovanými položkami

Po vytvoření svazku souborů CSS a javascriptových souborů počet požadavků klesl na 74 a stažení každého souboru bylo jen o trochu delší než stažení původních souborů po jednom:

Snímek obrazovky se 74 stahovanými položkami

Po sdružení se velikost svazku souborů JavaScript výrazně zmenšila z 815 kB na 365 kB:

Snímek obrazovky se zmenšením objemu stahovaných dat

Sdružení snímků vytvořením obrázkového spritu

Podobně jako se sdružují javascriptové soubory a soubory CSS můžete řadu malých ikon a dalších běžných obrázků sdružit do většího spritu a pak je pomocí stylu CSS jednotlivě zobrazit. Místo stahování jednotlivých obrázků webový prohlížeč uživatele stáhne celý sprit najednou a uloží ho do mezipaměti místního počítače. Tím se zrychlí načítání stránky, protože se zmenší počet stahovaných souborů a zkrátí se doba odezvy z webového serveru.

Vytvoření obrázkového spritu v rozšíření Web Essentials

  1. V sadě Visual Studio vyberte v Průzkumníku řešení soubory, které chcete zahrnout do svazku.

  2. Na vybrané soubory klikněte pravým tlačítkem a pak z místní nabídky vyberte Web Essentials > Create image sprite (Vytvořit obrázkový sprit). Příklady:

    Snímek obrazovky znázorňující vytvoření obrázkového spritu
  3. Vyberte umístění, kam chcete obrázkový sprit uložit. Soubor .sprite je soubor XML, který popisuje nastavení a soubory obsažené ve spritu. Následující obrázky znázorňují příklad spritového souboru PNG a odpovídajícího souboru XML .sprite.

    Snímek obrazovky se souborem spritů

    Snímek obrazovky se souborem XML spritů

Rozšiřte své znalosti a dovednosti
Projít školení
Získejte nové funkce jako první
Připojte se k účastníkům programu Office Insiders

Byly tyto informace užitečné?

Děkujeme vám za zpětnou vazbu.

Děkujeme vám za váš názor. Vypadá to, že bude užitečné, když vás spojíme s některým z našich agentů z podpory Office.

×