JavaScript tömörítés

Újra és újra szembesülnünk kell azzal, hogy a széles sávú internet általános elterjedésének ellenére nem engedhetjük meg azt a luxust, hogy figyelmen kívül hagyjuk a böngésző felé kiküldött adatmennyiséget. A JavaScript – vagy éppen CSS – tömörítés nem új keletű módszer, de ellenére nagyon kevesen élnek vele.

Ahogyan a weblapok kezdenek szépen átalakulni webalkalmazásokká egyre természetesebbnek számít, hogy akár jó pár JavaScript fájl is szükséges legyen a teljes funkciójú működéshez. Sőt egy blogmotor esetében az is előfordul, hogy az egyik plugin egy ajax keretrendszerre támaszkodik, egy másik plugin egy másikra, és így az oldalunk helyes betöltéséhez már jó pár száz KB-nyi JavaScript kódot kell letölteni.

Ha követjük a HTML szabványt és a JavaScript behúzásokat a head részen tesszük meg, akkor az oldal betöltődése leáll addig amíg az összes JavaScript file le nem töltődik. Ennek megkerülésére pakolhatjuk a JavaScript behúzásokat a dokumentum végére, a </body> tag elé, vagy tömöríthetjük a JavaScript fileokat.

JavaScript takarítás

A kód megírása közben sok olyan plusz karaktert használunk amelyek a kód olvashatóságát könnyítik meg az emberek számára, de a futásukhoz teljesen szükségtelenek. Ilyenek a megjegyzések, az új sorok és a behúzások. Sok eszköz létezik amellyel ezeket a működés szempontjából felesleges részeket eltávolítják a JavaScript fájlokból. Az egyik ilyen ingyenes, online alkalmazás a JSCompress. Használatával 30-90%-kal csökkenthetők a JavaScript fájlméretek.

Az így kipucolt JavaScript fájlok tökéletesek éles környezetben, de fejlesztői környezetben nem könnyítik meg a hibakeresést.

Tömörítés

A HTTP 1.1 óta létezik egy Accept-Encoding gzip direktíva amelyben a böngésző azt mondja magáról, hogy a szerver nyugodtan küldözgetheti neki a tartalmaz gzip-pel tömörítve. A gzip praktikusan minden operációs rendszeren elérhető, és a legtöbbön alapból fel van telepítve.

Első lépésként fognunk kell a JavaScript fájlokat és le kell őket tömörítenünk gzip-pel. Így további 30-70%-kal kisebb fájlokat fogunk kapni. Fogjuk a fájlokat és töltsük fel a tömörítetlen párjaik mellé.

Apache szerver beállítás

Ezek után arról kell gondoskodnunk, hogy ha a böngésző képes a gzip-pel tömörített állományok kezelésére, akkor azt kapja meg, ha nem, akkor pedig a tömörítetlen (de kitakarított) JavaScript fájlokat.

Ennek beállításához egy helyi .htaccess fájlt kell használnunk a következő tartalommal.

RewriteEngine on
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule (.*)\.js$ $1\.js.gz [L]
AddType "text/javascript" .js.gz

3 thoughts on “JavaScript tömörítés

  1. Érdemes még megemlíteni, hogy a JS tömörítők általában nem csak a whitespace-eket vagdossák ki a kódból, hanem logikailag helyes egyszerűsítéseket is végeznek. Ez legtöbbször a változónevek lerövidítése, de gyakori az, hogy kicsit átrendezik a kódot is.

    Jelenleg a legjobbnak a Google féle Closure Compiler-t tartom. http://code.google.com/closure/compiler/

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöljük.