This new version of the compressor fixes a few bugs and optimizes string concatenations. You can now keep your code nicely formatted by concatenating string literals, but not suffer any performance hit. For example, the following code:

var url = ".../services/rest/"
    + "?method=flickr.test.echo"
    + "&format=json"
    + "&api_key=02b6a73df2c4a33c282f3d02fe5724e3"
    + "&callback=jsonCallback";

will become (↵ marks a line continuation)

var url = ".../services/rest/↵
?method=flickr.test.echo&format=json↵
&api_key=02b6a73df2c4a33c282f3d02fe5724e3&callback=jsonCallback";

Also, note that, from now on, all YUI Compressor-related downloads will be done from a separate download page and not directly from this blog.

Download version 2.1 of the YUI Compressor

I am very pleased to announce the release of version 2.0 of the YUI Compressor. In addition to fixing several bugs and implementing a few enhancements suggested by the community, I also integrated Isaac Schlueter‘s regular expression based CSS minifier. Therefore, the YUI Compressor is now able to compress both JavaScript and CSS files (see the CHANGELOG for a full list of changes) And as always, keep the feedback coming!

Download version 2.0 of the YUI Compressor

Today, I found out that the good folks behind jQuery were using Packer, another great JavaScript compression utility by Dean Edwards, to distribute their compressed version of the library. The result: an amazingly small 21KB download! My first thought was: Wow, that is small! I then tried the YUI Compressor on the uncompressed version of the jQuery library and obtained a 31KB file. Not bad, but not nearly as good as Packer… I then decided to compare the gzipped version of these files. Here are my findings:

File	File size	Gzipped file size
Original jQuery library	62,885 bytes	19,758 bytes
jQuery minified with JSMin	36,391 bytes	11,541 bytes
jQuery minified with Packer	21,557 bytes	11,119 bytes
jQuery minified with the YUI Compressor	31,822 bytes	10,818 bytes

These results are amazing! The smallest file is the file obtained by minifying jQuery using the YUI Compressor and then gzipping. I would have thought that using Packer would have yielded the smallest file. In fact, it appears that Packer’s redundancy reduction algorithm is detrimental to gzip compression.

In addition to that, using Packer’s redundancy reduction algorithm adds a delay at the time the script gets executed (because the script needs to be unpacked and then eval’ed) On my laptop, this delay is about 200 msec. The conclusion is clear: for optimal performance, gzip your JavaScript code, and stay away from “advanced” JavaScript compression schemes that look attractive on paper, but end up degrading the performance of your site.

If your web hosting company does not offer HTTP compression, but gives you access to PHP (that’s the case of Yahoo! Web Hosting), I wrote a simple PHP script that will compress files and set the cache control headers so that the requested files actually get cached by the browser. I used this script with great success for a web site I worked on recently:

Note: yahoo-dom-event.js, minified with the YUI Compressor and gzipped only weighs 9,476 bytes. Not bad!

Update: Read this article by John Resig on JavaScript library Loading Speed.

The release of the YUI Compressor last week has generated a lot of buzz and excitement throughout the web development community. Actually, after receiving so much great feedback, I felt compelled to issue a minor update as soon as possible to fix the most important items that were brought to my attention (see the CHANGELOG file for a full list of changes) And please, keep the feedback coming!

Download version 1.1 of the YUI Compressor

Download OLM to PST Converter here | dirty chat | ballkjoler oslo

Is there a need for a new JavaScript minifier?

According to Yahoo!’s Exceptional Performance Team, 40% to 60% of Yahoo!’s users have an empty cache experience and about 20% of all page views are done with an empty cache (see this article for more information on browser cache usage) This fact outlines the importance of keeping web pages as lightweight as possible. Improving the engineering design of a page or a web application usually yields the biggest savings. After that come many different techniques such as minification of the code, HTTP compression, etc. In terms of code minification, the most widely used tools to minify JavaScript code are Douglas Crockford’s JSMin and the Dojo compressor. Both tools however have pitfalls. JSMin, for example, does not yield optimal savings (due to its simple algorithm, it must leave many line feed characters in the code in order not to introduce any new bugs) The Dojo compressor, on the other hand, does a better job at compacting code (it obfuscates local variables) but is unsafe and potentially introduces bugs if you are unaware of its limitations.

What is the YUI Compressor?

The YUI Compressor is a new JavaScript minifier. Its level of compaction is higher than the Dojo compressor, and it is as safe as JSMin. Tests on the YUI library have shown savings of about 18% compared to JSMin and 10% compared to the Dojo compressor (these respectively become 10% and 5% after HTTP compression)

How does it work?

The YUI Compressor is written in Java (requires Java >= 1.4) and relies on Rhino to tokenize the source JavaScript file. It starts by analyzing the source JavaScript file to understand how it is structured. It then prints out the token stream, replacing all local symbols by a 1 (or 2, or 3) letter symbol wherever such a substitution is appropriate (in the face of evil features such as eval or with, the YUI Compressor takes a defensive approach by not obfuscating any of the scopes containing the evil statement). The YUI Compressor is open-source, so don’t hesitate to look at the code to understand exactly how it works.

Where can I get it?

An archive containing both source and binary is available for download on this site.

How do I run it?

java -jar yuicompressor-1.0.jar
    [-h, --help] [--warn] [--nomunge]
    [--charset character-set] [-o outfile] infile

The following command line for example:

java -jar yuicompressor-1.0.jar myfile.js

will minify the file myfile.js and output the file myfile-min.js. For more information on how to use the YUI Compressor, please refer to the documentation included in the archive.

Limitations

Unlike JSMin, the YUI Compressor is slow and cannot be used for on-the-fly code minification (see minify for a PHP implementation of JSMin by Ryan Grove, another Yahoo! engineer, that does on-the-fly JavaScript minification among other things)

Has Yahoo!’s official position on obfuscation changed?

Douglas Crockford wrote an interesting article last year on minification vs. obfuscation. While that article still holds true, the YUI Compressor actually represents a 3rd way, in which code compaction does not carry the risk of introducing new bugs. The YUI Compressor is currently considered as a replacement for JSMin to compact the entire YUI library.

Feedback appreciated

The YUI Compressor is still a fairly new tool, so your feedback is well appreciated. Don’t hesitate to drop me a line if you find a bug, or think an important feature is missing. I will make updates available on this site, so watch for posts related to the YUI Compressor on this blog. This software belongs to the community, so it’s up to the community to make it better!

Additional notes

• Do not hesitate to use the --warn option. The YUI Compressor will warn you if it finds anything that seems abnormal with your code, or that might reduce the level of compression.
• Keep as little of your code as possible in the global scope. This has 2 benefits:
  1. You’ll get a better level of compression since the YUI Compressor does not obfuscate global symbols (which would make it unsafe)
  2. You won’t pollute the global object (see this article)

I wrote a prototype YUI-based image magnifier widget that makes use of VML on Internet Explorer and the Canvas tag on all the other A-grade browsers. Attached is a screenshot.

To instantiate the widget, include the following source files in your web page (requires YUI >= 2.3)

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="image-magnifier.css">
<!-- Dependencies -->
<script src="yahoo-dom-event.js"></script>
<script src="dragdrop-min.js"></script>
<!-- Image cropper source file -->
<script src="image-magnifier-min.js"></script>

Then, place an image on your page:

<img src="myImage.jpg" id="myImageId">

Finally, instantiate the widget:

<script>
    new YAHOO.widget.ImageMagnifier("myImageId", "magnified.jpg");
</script>

Although this prototype is not extremely polished, it should work fairly well right out of the box. Here is a live demo of the image magnifier widget (drag the lens around). You can also download an archive containing all the necessary source code.