Compress/minify JavaScript and CSS files

We can find a lot of JavaScript free compress/minify tools:

I will write something about the YUI Compressor. YUI Compressor is written in Java and relies on Rhino to tokenize the source JavaScript file. You can download the latest version of YUI Compressor here.

This script has:
Pros:

  • the internet connection is not required
  • it allows you to compress Javascript and CSS files

Cons:

  • requires Java >= 1.4)

How to use the YUI Compressor?

At the shell/cmd execute the following code x.y.z. represents the version number:

java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.js

myfile.js is file which will be compressed
Option -o will place the output into ‘file’ or a file pattern.
myfile-min.js is the output file

Is possible to compress more then one file at once?

I didn’t dig in to the documentation if this is possible or not, because i would like to compress files in different locations into one compressed file. I wrote for this solution batch/shell script.
The script checks first if compressed file exists. If it does, then it removes the current compressed file.

if [ -e js/myfile-min.js ]
then
  rm js/myfile-min.js
fi

Then script merges files into uncompressed myfile-min.js

cat js/file-1.js js/file-2js js/sub/file-1.js js/sub2/file-1.js > js/myfile-min.js

The last step is, that we compress the myfile-min.js

java -jar yuicompressor-2.4.8.jar js/myfile.js -o js/myfile-min.js

Here is the complete code for the Unix users:

if [ -e js/myfile-min.js ]
then
  rm js/myfile-min.js
fi
cat js/file-1.js js/file-2.js js/sub/file-1.js js/sub2/file-1.js > js/myfile-min.js
java -jar yuicompressor-2.4.8.jar js/myfile-min.js -o js/myfile-min.js

and the solution for the Windows users:

IF EXIST js\myfile-min.js del js\myfile-min.js
type js\file-1.js js\file-2.js js\sub\file-1.js js\sub2\file-1.js > js\myfile-min.js
java -jar yuicompressor-2.4.8.jar js\myfile-min.js -o js\myfile-min.js

CSS files

The solution for the CSS file is almost the same. Just add option --type css.

java -jar yuicompressor-2.4.8.jar --type css css/style.css -o css/style-min.css


The comparison between the JavaScript compressors

I used for the test two files. The first file was the KineticJS framework version 4.7.3 and the JavaScript file from The Statistics page.

KineticJS – file size: 484.713 bytes
JavaScript Compressor: 120.062 bytes
JsMini: 133.779 bytes
JSCompress: 105.079 bytes
UglifyJS 2: 103.741 bytes
blimptontech: 105.079 bytes
YUI Compressor: 105.484 bytes

The Statistics – file size: 12.658 bytes
JavaScript Compressor: 7.682 bytes
JsMini: File was not compressed
JSCompress: 7.529 bytes
UglifyJS 2: 7.533 bytes
blimptontech: 7.529 bytes
YUI Compressor: 7.537 bytes

UglifyJS 2 looks like the best compression tool for the JavaScript, but JSCompress uses UglifyJS 1 and blimptontech uses UglifyJS 2, both compressed better The Statistics file and worse the KineticJS. Then follows the YUI Compressor and the worst are JavaScript Compressor and JsMini.

We will have to wait for ‘The best compressor tool’ and compress our files with different tools and check which one compressed the best.


November 7, 2013: The post was updated with the comparison between the online compressors, YUI Compressor and the UglifyJS 2 library.

2 thoughts on “Compress/minify JavaScript and CSS files

  1. DDonna

    My fav free online tool is http://www.blimptontech.com they use UglifyJS2 and it gets regularly updated and you can combine files. Have you ever compared which has a better compression ratio, YUI vs UglifyJS2? Guess I am going to have to give a try and see which method gives the best minified JS file. Thanks for the great and detailed write up.

    • Jernej Lekše

      Thanks for the suggestion. I’ll try UglifyJS2 later and update this post with the comparison table.

Leave a Reply