jcm_logo Mi ez? Teszteredmények Letöltés Telepítés Liszensz Kapcsolat
Kommentek JCM Facebook oldal Online tömörítés English

A JCM-ről röviden...

Javascript Css Minimalizáló, ingyenes PHP alapú tömörítő

A JCM egy PHP alapú Javascript és CSS tömörítő, mely elsősorban magát a Javascript és Css állományokat tömöríti, minimalizálja felesleges részek elhagyásával, illetve a későbbi tervekszerint, optimalizált kód generálással. Másodsorban pedig a kapot már tömör kódokat egyesíti egy-egy fájlba (természetesen a JS-ket és a CSS-eket külön), és Gzip tömörítéssel a lehető legkissebb méretűre csökkenti őket.
Ezáltal az oldal letöltéskor a szervernek csak egy JS és egy CSS állományt kell a kliens felé kiszolgálnia, így csökkentve a hálózati forgalmat, nem beszélve az így kapott kód méretek csökkenéséről, ami a tömörítés (és GZip) miatt akár felére is csökkenthet.

A technika nem ismeretlen, az alábbi lépéseket tartalmazza:

  1. JS és CSS fájlok összegyűjtése
  2. Cache vizsgálat a fájlok utolsó módosításának dátuma alapján, így értelemszerűen csak akkor tömörítünk újra, ha szükséges
  3. Amennyiben szükséges, akkor tömörítés majd egyesítés a gyorsítótár-fájlban
  4. Az elkészült gyorsítótár fájlok GZip tömörítése

Mind a JS, mind a CSS állományok, a gyűjtés sorrendjének megfelelően lesznek a gyorsítótárban letárolva.

A tömörítést egy saját és egy külső kód végzi, a JS tömörítést a JCM saját JS tömörítője, a CSS tömörítést pedig a CssMin 3. A CssMin 3 kódja változatlan, eredeti formában működik.

Szeretném megjegyezni, hogy a sem a JCM, sem a tömörítéseket végző külső szoftver működéséért nem vállalok felelősséget! Természetesen több soron letesztelt kódokról van szó, de az ördög sosem alszik. Az esetlegesen ismert hibákat közzé teszem.

Tervezett feladatok:

  • Fájlonkénti tömörítési lehetőség megadása, így a már tömör formátumú (minified) fájlokra nem kell időt fordítani.
  • Javascript függvénynév tömörítés

Verzió követés

2012.10.16. verzió: 0.8

  • Hiba javítások
  • Sebesség optimalizálás
  • Átlagosan tömörebb kódot produkál mint a YUI compressor (http://refresh-sf.com/yui)

2012.10.11. verzió: 0.8b

  • Új tömörítési metódus [renamer]
    • változó nevek rövidítése, gyakoriságra optimalizáltan
    • még hatákonyabb szóköz eltávolítás
    • true/false rövidítés: true: !0 és false: !1 formára
  • A meglévő [normal] metódus csak "whitespace" eltávolítást végez továbbra is, JS értelmezési hibáj javítása
  • Át dolgozott JS értelmező, ezért még optimalizálatlan és lassabb mint az előző verzió, bár tömörítésben hatékonyabb.

2011.08.21. verzió: 0.7

  • JSminimizer.php optimalizálása
  • JS tömörítés optimalizálás, lásd teszteredmények

2011.08.11. verzió: 0.6

  • JS és CSS fájlok hozzáadása fájlból és url alapján is
  • JS és CSS tömörítése (minify, JCM és CssMin 3 segítségével)
  • Gyorsítótár, hogy ne kelljen mindig tömöríteni és egyesíteni a kódokat
  • A létrejött gyorsítótár(ak) GZip-be tömörítése
  • Debug mód, részletes eseménykövetéssel
  • Cache kontroll a böngészők felé (PHP header)

Ismert hibák

  • jQuery 1.62 min. kódjának tovább tömörítése után, a böngésző hibát ad.

Teszteredmények

JS, CSS betöltési idők, hatékonyság, ajánlások

JCM V0.8b

teszt JS fájl: jQuery UI - v1.9.0

eredeti tömörítetlen méret: 445274 byte

  • 2012.10.11. [RENAMER] optimalizálatlan verzió: 247528 byte (8.42sec)
  • 2012.10.11. [NORMAL] optimalizálatlan verzió: 293651 byte (7.83sec)

teszt JS fájl: jQuery JavaScript Library v1.8.2.

eredeti tömörítetlen méret: 274656 byte

  • 2012.10.11. [RENAMER] optimalizálatlan verzió: 103300 byte (4.55sec)
  • 2012.10.11. [NORMAL] optimalizálatlan verzió: 142048 byte (4.43sec)

JCM V0.7

teszt JS fájl: jQuery JavaScript Library v1.6.2.

eredeti tömörítetlen méret: 236201 byte

  • 2011.08.21. PHP kód optimalizálás: 133275 byte (2.28sec)
  • 2011.08.19. optimalizált operátorok körüli whitespace kezelés: 133275 byte (3.4sec)
  • 2011.08.19. optimalizált ";}" -> "}" kezelés után: 135305 byte (3.4sec)
  • 2011.08.19. optimalizált "," kezelés után: 136558 byte (3.37sec)
  • 2011.08.19. első működő verzió: 138687 byte (3.55sec)

Betöltés teszt:

A tesztet Google Chrome 13-n végeztem, az alábbi fájlokkal:

  • default.css, 2047 byte, az oldal saját css fájlja
  • snippet.css, 50824 byte, a syntax highlighter része
  • jquery.js, 91572 byte, jQuery 1.6.2.min.
  • snippet_min.js, 68457 byte, syntax highlighter
  • main.js, 662 byte, az oldal saját js fájlja


Betöltés teszt JCM nélkül


Betöltés teszt JCM tömörítéssel

A JCM használata során a következő eredmények születtek

  • a css fájlok tömörítve 6776 byte-t foglalnak, amit 59 ms alatt töltött be a Chrome, kb. annyi idő alatt, mint a tömörítetlen default.css-t
  • a js fájlok tömörítve 49671 byte-t foglalnak, ezt 223 ms idő alatt töltötte be a Chrome, ez valamivel kevesebb mint csak a snippet_min.js betöltése
  • a végeredmény 649 ms-s oldal betöltés helyett, 464 ms, ez durván 0,2 mp... ami ilyen csekély css és js állományok mellett jónak mondható (legalább is szerintem).

A teszt nem tartalmazza a JCM tömörítési fázisát, hiszen nem életszerű minden betöltésnél tömöríttetni a kódokat, ezért is van benne cache kontroll, css vagy js kód változás után automatikusan újra tömöríti az állományokat (ez jelen esetben nem haladja meg a 2.3 mp-t, várhatók további optimalizálások).

Letöltés

Használd a JCM-t bármikor, ingyen.

2012.10.16. | Verzió: 0.8, méret: 35451 mod_jcm letöltés

2012.10.11. | Verzió: 0.8b, méret: 35349 mod_jcm letöltés

2011.08.23. | Verzió: 0.7, méret: 30870 mod_jcm letöltés

Telepítés

A JCM felépítése?

A JCM 4 fő részből áll:

  1. jcm_main.php, a JCM 'magja', a JCM osztályt tartalmazza
  2. jcm_class mappa, a cssmin és jsminimizer php fájlokat tartalmazza, a tömörítéseket végzik
  3. united_js.gz és united_css.gz, a JS és CSS gyorsítótára Gzip tömörítve
  4. united_js.php és united_css.php a JS és CSS gyorsítótárakat adja át a böngészőnek

A telepítés lépései:

  1. Másoljuk a jcm_class mappát és jcm_main.php fájlt egy nekünk tetsző mappába
  2. A JS és CSS mappáinkban hozzuk létre az alábbi fájlokat:
    • A JS mappánkba az united_js.gz és united_js.php
    • A CSS mappánkba az united_css.gz és united_css.php
  3. Az imént létrehozott 4 fájlra adjunk írás jogot, hogy a szerver (apache) tudja azokat módosítani
  4. Nyissuk meg a jcm_main.php-t és az alap beállításokat végezzük el az alábbiak szerint:
    • Amennyiben a jcm_main.php-t és a jcm_class mappát nem egy helyre másoltuk, úgy állítsuk be a megfelelő elérést a külső kódok számára.
      // check this value
      private $css_packer_route = 'jcm_class/Cssmin.php';		// cssmin.php relative path from jcm_main.php
      // check this value
      private $js_packer_route = 'jcm_class/JSminimizer.php';	// jsminimizer.php relative path from jcm_main.php
                                      
    • A honlapod által használt JS fájlok helye (az index.php-hoz képest), valamint a JS gyorsítótár és betöltőjének leendő neve, esetleges ütközések elkerülése végett érdemes felülvizsgálni.
      // check this value
      private $jsPath = "assets/js/";				// place of your JS files
      private $jsCacheNamePure = "united_js";		// JS cache file name, without extension!
      private $jsCacheName = "united_js.php";		// JS cache loader file name, this is a real php file
                                      
    • A honlapod által használt CSS fájlok helye (az index.php-hoz képest), valamint a CSS gyorsítótár és betöltőjének leendő neve, esetleges ütközések elkerülése végett érdemes felülvizsgálni.
      // check this value
      private $cssPath = "assets/css/";				// place of your CSS files
      private $cssCacheNamePure = "united_css";		// CSS cache file name, without extension!
      private $cssCacheName = "united_css.php";		// CSS cache loader file name, this is a real php file
                                      
  5. Az index.php fájlunkban (vagy ahol a tömörítést szeretnénk végezni) az alábbi kódot kell használni
    // jcm_main.php include-olása
    require "model/jcm_main.php";
    // JCM osztály, ha paraméter true, akkor mindig tömöríti a hozzáadott fájlokat, ha false, akkor a cache alapján
    $JCM = new JCM(true);
    // JS gyűjtés
    $JCM->addJS("assets/js/teszt_jquery.js");
    $JCM->addJS("assets/js/snippet_min.js");
    $JCM->addJS("assets/js/main.js");
    // JS tömörítés, a packJS() fv. tömöríti és vissza adja az elkészült fájl nevét
    $united_js_name = $JCM->packJS(); // united_js.gz
    // CSS gyűjtés
    $JCM->addCSS("assets/css/default.css");
    $JCM->addCSS("assets/css/snippet.css");
    // CSS tömörítés, a packCSS() fv. tömöríti és vissza adja az elkészült fájl nevét
    $united_css_name = $JCM->packCSS(); // united_css.gz
                            

Telepítési/használati javaslatok:

A jcm_main.php-t javasolt a jcm_class mappával egy helyre másolni, bár a program könnyen konfigurálható.

Előfordulhat, hogy a már tömör formátumú JS fájlokkal (pl.: jQuery 1.6.2.min) nem bírkózik meg a tömörítő, így azokat ne tömörítsük.

Liszensz

Kapcsolat

Elérhetőségek...

Készítő: Szentgyörgyi János

E-mail: info@dynamicart.hu

WWW: www.dynamicart.hu