Kódtömörítés és kötegelés a SharePoint Online-ban

Ez a témakör bemutatja, hogy hogyan használhat méretminimalizálási és kötegelési technikákat a Web Essentials bővítményben a HTTP-kérelmek számának csökkentéséhez és a SharePoint Online-lapok betöltésének felgyorsításához.

Ha testreszabja a webhelyét, könnyen előfordulhat, hogy a testreszabott funkciók támogatásához nagyszámú további fájlt kell hozzáadni a webhelyéhez. A további JavaScript-, CSS- és képfájlok hozzáadása megnöveli a kiszolgálóhoz befutó HTTP-kérelmek számát, mely hosszabb lapbetöltési időt eredményezhet. Ha több, azonos típusú fájllal rendelkezik, kötegelheti ezeket a fájlokat, hogy ezzel felgyorsítsa a letöltésüket.

A JavaScript- és CSS-fájlok esetében méretminimalizálást is végezhet, mely eltávolítja a fájlokból a működéshez szükségtelen szóközöket és sortöréseket, ezzel csökkentve a fájlok méretét.

JavaScript- és CSS-fájlok méretminimalizálása és kötegelése a Web Essentials bővítménnyel

A CSS- és JavaScript-fájlok kötegeléséhez használhat külső gyártótól származó szoftvereket, például a Web Essentials bővítményt.

Fontos : A Web Essentials egy nyílt forráskódú, közösségi fejlesztésű projekt. A szoftver bővítményként használható a Visual Studio 2012 és a Visual Studio 2013 fejlesztői környezetben. A Microsoft nem nyújt támogatást ehhez a termékhez. A Web Essentials letöltéséhez látogasson el a következő lapra: http://vswebessentials.com/download.

A Web Essentials a kötegelés két módját támogatja:

  • .bundle: CSS- és JavaScript-fájlok esetén

  • .sprite: képfájlok esetén (csak a Visual Studio 2013-ban támogatott)

A Web Essentials akkor lehet hasznos, ha van olyan meglévő funkciója, amely egy mesteroldalon belül hivatkozik több elemre, például:

Képernyőkép az egyéni mesterlap arculateleméről

JavaScript- és CSS-kötegelés a Web Essentials bővítményben

  1. A Visual Studio alkalmazás Megoldáskezelő paneljén jelölje ki a kötegelni kívánt fájlokat.

  2. Kattintson a jobb gombbal a kijelölt fájlokra, és válassza a helyi menü Web Essentials > Create JavaScript bundle file (JavaScript-kötegfájl létrehozása) parancsát. Példa:

    Képernyőkép a Web Essentials menülehetőségeiről

A JavaScript- és CSS-fájlkötegelés eredményének megtekintése

A JavaScript- és CSS-fájlok kötegelésekor a Web Essentials létrehoz egy XML-fájlt (úgynevezett receptfájlt), amely a JavaScript- és CSS-fájlok azonosítási adatait, illetve egyéb konfigurációs adatokat tartalmaz:

Képernyőkép a JavaScript- és a CSS-receptfájlról

Emellett, ha a „minify” jelölő igaz értékre van állítva a kötegelési receptben, akkor a program a fájlok méretét is csökkenti a kötegelés mellett. Ez azt jelenti, hogy új, minimalizált méretű JavaScript-fájlok jönnek létre, és a mesteroldal ezekre a fájlokra fog hivatkozni.

Képernyőkép a true értékre állított minify jelzőről

Ha betölti a webhelye egy lapját, a böngészője – például az Internet Explorer 11 – fejlesztőeszközeivel megtekintheti a kiszolgálónak küldött kérelmek számát, és hogy mennyi ideig tartott az egyes fájlok letöltése.

Az alábbi ábrán a JavaScript- és CSS-fájlok minimalizálás előtti betöltési idejét láthatja.

Képernyőkép 80 letöltött elemről

A JavaScript- és CSS-fájlok kötegelése után a kérelmek száma 74-re csökkent, az egyes fájlok letöltése pedig csak kis idővel tartott tovább, mint az eredeti fájlok esetében:

Képernyőkép 74 letöltött elemről

A kötegelés után a JavaScript-kötegfájl mérete jelentősen, 815 KB-ról 365 KB-ra csökkent:

Csökkentett letöltési méretet megjelenítő képernyőkép

Képek kötegelése több képet egyesítő képfájlba

A JavaScript- és CSS-fájlok kötegeléséhez hasonlóan a kisméretű ikonokat és más gyakran használt képeket is kötegelheti egy nagyobb képfájlba, majd CSS-tulajdonságok segítségével jelenítheti meg az egyes kisméretű képeket. Az egyes képek külön-külön való letöltése helyett a felhasználó böngészőjének ekkor csak az egyesített képfájlt kell letöltenie, és gyorsítótárazhatja azt a helyi számítógépen. A letöltendő elemek számának e módon való csökkentése felgyorsítja a weblapok betöltését.

Képek kötegelése a Web Essentials bővítménnyel

  1. A Visual Studio alkalmazás Megoldáskezelő paneljén jelölje ki a kötegelni kívánt fájlokat.

  2. Kattintson a jobb gombbal a kijelölt fájlokra, és válassza a helyi menü Web Essentials > Create image sprite (Képkötegfájl létrehozása) parancsát. Példa:

    Összevont képeket tartalmazó kép létrehozását bemutató képernyőkép
  3. Válasszon egy helyet az egyesített képfájl mentéséhez. A .sprite fájl egy XML-fájl, mely tartalmazza a kötegelés beállításait és az egyesített képek adatait. Az alábbi ábrán egy PNG-kötegfájlt láthat, az ahhoz tartozó .sprite XML-fájllal együtt.

    Előre gyártott grafikai elemeket (sprite-okat) tartalmazó fájl képernyőképe

    Előre gyártott grafikai elemeket (sprite-okat) tartalmazó XML-fájl képernyőképe

Ismeretek bővítése
Oktatóanyagok megismerése
Új szolgáltatások listájának lekérése
Részvétel az Office Insider programban

Hasznos volt az információ?

Köszönjük a visszajelzését!

Köszönjük visszajelzését. Jobbnak látjuk, ha az Office egyik támogatási szakemberéhez irányítjuk.

×