bojanpejic.com

In past few months and recently I did some JavaScript coding. The whole source code wasn’t so big, around 15kB, but it may be growing more, and there are also other JavaScript files which are included in the page and maybe I merge them. To reduce amount of data and in hope to little speed up loading of the page I was looking for some options to compress (minify) the source code.

What means to minify JavaScript?

One more term which is used for reducing the size of code is minification or minify.

Minification (very often just minify, and sometimes also minimisation or minimization), in computer programming languages and especially JavaScript, is the process of removing all unnecessary characters from source code, without changing its functionality. These unnecessary characters usually include white space characters, new line characters, comments and sometimes block delimiters; which are used to add readability to the code, but are not required for it to execute. – wikipedia.org

Why to compress/minify?

In putting to a simple way the whole quote above, compress (minify) the code to load it faster! Beside that you’ll reduce the bandwidth consumption of website, and number of HTTP requests if you combine several JavaScript files in one.

Tools for compress/minify

Searching over Internet I found several tools which are commonly used for compressing JavaScript code, these tools for compress are:

• JSMin by Douglas Crockford
• Dojo compressor
• Packer by Dean Edwards
• YUI compressor
• Google minify

JSMin – is a filter which removes comments and unnecessary whitespace from JavaScript files. It typically reduces filesize by half, resulting in faster downloads. It also encourages a more expressive programming style because it eliminates the download cost of clean, literate self-documentation.

Dojo compressor – in the design of the the Dojo compressor,  instead of brittle regular expressions, the Dojo compressor is based on Rhino, a JavaScript engine from the Mozilla project.

Packer v3.0 – some features of it are respect Microsoft conditional terms, new option to shrink variable and argument identifiers, removed the special chars feature (except the ;;; feature which people seem to like) etc.

Google minify -  is a PHP5 app that helps you follow several of Yahoo!’s Rules for High Performance Web Sites. It combines multiple CSS or Javascript files, removes unnecessary whitespace and comments, and serves them with gzip encoding and optimal client-side cache headers.

YUI compressor – The YUI Compressor is a JavaScript compressor which, in addition to removing comments and white-spaces, obfuscates local variables using the smallest possible variable name. This obfuscation is safe, even when using constructs such as ‘eval’ or ‘with’ (although the compression is not optimal is those cases) Compared to JSMin, the average savings is around 20%.

Note: it’s possible to make gzip compression of code, which are supported natively by modern web browsers, and also shrink previously minified JavaScript file.

Which one to use?

Well that’s a personal decision, I read some posts and articles over Internet and most of them suggests YUI compressor, but it don’t means that you have too.

On web page called JavaScript CompressorRater you can found details and analyzes how successful are different compression tools in action. Compression is done on popular JavaScript libraries. I recommend to visit it, at least you can get some view on their success in action.

Online compress tools

Here are some online compress tools for beginning:

• http://www.minifyjs.com
• http://jscompress.com
• http://javascriptcompressor.com

In some of next posts I’ll try to explain how to make it done on your computer, not with an online compress tool. Happy compressing!