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
--warnoption. 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:
- You’ll get a better level of compression since the YUI Compressor does not obfuscate global symbols (which would make it unsafe)
- You won’t pollute the global object (see this article)
@Alex
Good question. I guess it should, although I haven’t tried it. Please let us know!
I have tried it by accident. I didn’t realize I didn’t have sun’s jre on an Ubuntu box. So it’s been running (without a hitch) with gij 4.1.2 from Ubuntu Feisty.
I haven’t tried compiling it, though. I was just using the compiled jars. The other classes work fine too.
BTW: Is the version # needed in the jar names?
Ciao!
Yes, the version number is required in the jar name.
BUG:
The following CSS:
background-image: url(‘grad_white.png’);
_background-image: none; /* ie sucks */
Is incorrectly turned into:
background-image:url(‘grad_#fff.png’);_background-image:none;
Ciao!
BTW: I assume that this means that the CSS compression isn’t using the same technique as the JavaScript compression: building a parse tree and then unparsing it?
How hard would it be to do that? The CSS standard seems pretty straight forward as far as parsing.
Ciao!
The main problem is the use of CSS hacks, which are (unfortunately) widely used (and abused) These hacks rely on parsing errors, so building a CSS parser that can parse hacks correctly is no easy task. The CSS compressor uses a set of regular expressions. By the way, unlike the JavaScript compressor, the CSS compressor is NOT 100% safe (although it tries to be as safe as possible and should work in most cases)
Input:
.a {border: 1px solid #cccccc;}
Output:
.a{border:1px solid#ccc;}
I’m not quite sure what css standard says, but at least IE6 doesn’t seem to understand this compressed version where there is no space between solid and #ccc.
Could you post information on licensing? Do you have a publicly readable Subversion repository? Want one?
@Kris
The YUI Compressor, like the rest of the YUI library, is released under the BSD license (see README file at the very bottom) There is no public svn repository at this time, and I don’t wish to have one. Ultimately, the YUI Compressor will be shipped as part of the YUI library (along with other tools) and will follow the same development guidelines.
Regards
Sorry for the silly question… but
Can i run your YUI compressor in Windows?
@Sumeet
Sure. You can run the YUI Compressor on all the platforms that Java supports, and that includes Windows.
Regards
One idea about CSS compression. Currently (2.2.4) YUI Compressor packs
.a {
width: 10px;
height: 20px;
}
to
.a{width:10px;height:20px;}
I think that the last semicolon ‘;’ can be also quite easily removed, so the output should be
.a{width:10px;height:20px}
Maybe it requires only replacing all ‘;}’ sequences with ‘}’ at the end of the process. Or could it cause errors in some situation(s)?
@Aki
Unfortunately, removing the last semi-colon will break some older browsers (safari)
Regards
Thanks a lot for fixing the Prototype $super “bug”. Removing the -nomunge option made it possible to squeeze another 35 KB out of my code.
Keep the good work up!
Regards
BUG:
Version 2.2.4
pre {white-space: pre;}
becomes:
pre {#fff-space: pre;}
Ciao!
My mistake, this was fixed in 2.2.4…sorry.
Hello,
Can you distribute the Ant buildfile for those of use who want to experiment with modifications ourselves?
thanks
Pingback: Elephant Hunter » Blog Archive » Code Compression
Hello,
Is it possible to pass several file names as arguments of YUI compressor? It would also be great to pass a wildcard expression to compress all JS/CSS files.