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
Share
Mi az az RSS és mi az a PayPal?

Ez a bejegyzés rrd billentyűzetéből potyogott ki 2010 március 14. napján 17:27:22-kor. Eddig 2,509 olvasást ért meg. A visszajelzéseket nyomonkövetheted ezzel az RSS feed-el. Véleményt nyilváníthatsz, vagy trackbackolhatsz a saját oldaladon.

Ugrás fel

JólMegMondjad!

3 vélemény

  1. macat
    2010 március 14. 18:50:54

    É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/

  2. deejayy
    2010 március 16. 13:38:32

    Én így:

    ob_start(ob_gzhandler);

    header(“Content-type: text/javascript”);
    foreach ($files['js'] as $i) {
    include($i);
    }

    ob_end_flush();

  3. opendir
    2010 március 17. 07:19:52

    JavaScript tömörítés egy másik módszere:
    http://opendir.hu/js_tomorito és http://opendir.hu/css_tomorito

    De az is egy módszer, hogy az összes JS fájlunkból egy fájlt készítünk és azt tömörítjük le.

Switch to our mobile site