JCM is a Javascript and Css compressor, written in PHP, primarily, minimize the javascript and css files, then merge them separately into a js cache and a css cache file. In next step, the cache files compressed over with Gzip method.
So, reducing the network traffic, the server to the client (browser) provides only 2 files (1 JS, 1 CSS), wich are also mutch smaller.

The technique is not unknown, see the following steps:

1. Minimize the JS and CSS files
2. Cache control based on the files last modified date, so we just compress it again if necessary.
3. If necessary, then compress it and merge to 1-1 cache files.
4. Compress the cache files with Gzip

Both the JS and the CSS files are stored in order of the collection.

The JS minimize its own code, the CSS minimize by an external code with CssMin 3. CssMin 3 code is original and unchanged.

I would like to note I do not take responsibility for work of JCM! Of course the code is tested, but the devil never sleeps. Any known issues are published.

• Variable compress ratio on each files, so the already compressed files just stored on cache, and not minimized.

16. Oct. 2012. ver: 0.8

• Bug fix
• Speed optimalisation
• Produce shorter code than YUI compressor (http://refresh-sf.com/yui)

11. Oct. 2012. ver: 0.8b

• New compression method [renamer]
  • The variable names replace to short names
  • More aggressive whitespace removing
  • true/false replace: true>!0 and false>!1
• The [normal] method only whitespace remover (new JS adapter -> slow)
• Revisited JS adapter, slower then previous version, but it compress better.

21. Aug. 2011. ver: 0.7

• JSminimizer.php optimize
• Optimize of JS minimizer, see results...

11. Aug. 2011. ver: 0.6

• JS and CSS files add from file and url
• JS and CSS minimize (JCM and CssMin 3)
• Cache control
• Compress the cache files with Gzip
• Debug mode, detailed event tracking
• Cache control for browsers (PHP header)

• jQuery 1.62 min. code more minimze is throw a bug in the browser.

JCM V0.8b

test JS file: jQuery UI - v1.9.0

original uncompressed size: 445274 byte

• 2012.10.11. [RENAMER] unoptimized version: 247528 byte (8.42sec)
• 2012.10.11. [NORMAL] unoptimized version: 293651 byte (7.83sec)

test JS file: jQuery JavaScript Library v1.8.2.

original uncompressed size: 274656 byte

• 2012.10.11. [RENAMER] unoptimized version: 103300 byte (4.55sec)
• 2012.10.11. [NORMAL] unoptimized version: 142048 byte (4.43sec)

JCM V0.7

test JS file: jQuery JavaScript Library v1.6.2.

original uncompressed size: 236201 byte

• 2011.08.21. PHP opitmize: 133275 byte (2.28sec)
• 2011.08.19. optimized whitespace handling arround operators: 133275 byte (3.4sec)
• 2011.08.19. optimized ";}" -> "}" handling: 135305 byte (3.4sec)
• 2011.08.19. optimized "," handling: 136558 byte (3.37sec)
• 2011.08.19. first stable version: 138687 byte (3.55sec)

Load test:

Test in Google Chrome 13, these files:

• default.css, 2047 byte, its the webpage own css file
• snippet.css, 50824 byte, part of the syntax highlighter
• jquery.js, 91572 byte, jQuery 1.6.2.min.
• snippet_min.js, 68457 byte, syntax highlighter
• main.js, 662 byte, its the webpage own js file

Load test without JCM

Load test with JCM minimize/compress

The following results were:

• css files are compressed 6776 byte, these load under in 59 ms, approx. this is equivalent the time to load as uncompressed default.css
• js files are compressed 49671 byte, these load under in 223 ms, is only slightly less than the loading snippet_min.js
• overall: 649 ms instead of, 464 ms, this roughly 0,2 sec... Such a little css and js files while quite good (at least in my opinion).

The test is not content the JCM compression time, because this is not realistic, not compressed the cache in every page load. The compression time in this case, approx. 2.3 sec.

16. Oct. 2012. | Ver: 0.8, size: 35451 mod_jcm download

11. Oct. 2012. | Ver: 0.8b, size: 35349 mod_jcm download

23. Aug. 2011. | Ver: 0.7, size: 30870 mod_jcm download

The JCM are 4 main part:

1. jcm_main.php, a JCM 'core', content the JCM class
2. jcm_class directory content the cssmin and the jsminimizer php files
3. united_js.gz and united_css.gz, the JS & CSS cache compressed with Gzip
4. united_js.php and united_css.php the JS & CSS cache load for the browser

1. Copy the jcm_class directory and the jcm_main.php file to a folder
2. In the JS and CSS folders create these files:
   • In JS folder: united_js.gz and united_js.php
   • In CSS folder: united_css.gz and united_css.php
3. Add to write perm. to the four newly created file, the server (apache) can be modify.
4. Open the jcm_main.php and setup the default config:
   • Setup the correct path to jcm_main.php and the jcm_class folder.

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

   • Your JS files place (relatively from index.php), and the JS cache and loader name.

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

   • Your CSS files place (relatively from index.php), and the CSS cache and loader name

     // 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. In the index.php (or where the compression you want to do) use this code

   // jcm_main.php include
   require "model/jcm_main.php";
   // JCM class, if parameter is true, then force compression overwrite the cache, if false, then work the cache control normaly
   $JCM = new JCM(true);
   // JS collect
   $JCM->addJS("assets/js/teszt_jquery.js");
   $JCM->addJS("assets/js/snippet_min.js");
   $JCM->addJS("assets/js/main.js");
   // JS minimize and compress, packJS() return the cache file name
   $united_js_name = $JCM->packJS(); // united_js.gz
   // CSS collect
   $JCM->addCSS("assets/css/default.css");
   $JCM->addCSS("assets/css/snippet.css");
   // CSS minimize and compress, packCSS() return the cache file name
   $united_css_name = $JCM->packCSS(); // united_css.gz
                           

Copy the jcm_main.php and the jcm_class folder in one place, although the program can be easily configured.

May, already minimized javascript files are throw bug in browser (e.g.: jQuery 1.6.2.min), so they can not mimized.

This software under CC BY-NC-ND license

Clearly: Attribution-NonCommercial-NoDerivs CC BY-NC-ND http://creativecommons.org/licenses/by-nc-nd/3.0/

More information: http://creativecommons.org/licenses/by-nc-nd/3.0/legalcode

Programmer: János Szentgyörgyi

E-mail: info@dynamicart.hu

WWW: www.dynamicart.hu