Should I use the YUI Compressor or the new Google Closure compiler to compress my JavaScript?

Solution 1:

"Whichever you find best for you" I think is the general answer at the moment - YUI has been available longer so undoubtedly will be the one which currently has the consensus as being the best tool. Whereas Closure is new to us - so there isn't the wealth of experience with Closure as there is with YUI. Hence I don't think you'd find a compelling real-world arguments of why to use Closure based on people's experiences with it simply because it's new.

That's not to say you shouldn't use Closure....just my round about way of saying, I don't think there's an answer available to this until a number of people have used the 2 and compared them.

Edit: There are a couple of early comparisons, saying Closure does give an improvement: http://blog.feedly.com/2009/11/06/google-closure-vs-yui-min/
http://news.ycombinator.com/item?id=924426

Further Edit: Worth keeping an eye on issue list for Closure: http://code.google.com/p/closure-compiler/issues/list

Solution 2:

From the comparisons I've seen, Closure seems to be the clear winner in terms of minimizing file size. This article uses three popular JS libraries (jQuery, Prototype, MooTools) to compare compression between YUI Compressor and Closure Compiler: http://www.bloggingdeveloper.com/post/Closure-Compiler-vs-YUI-Compressor-Comparing-the-Javascript-Compression-Tools.aspx

Closure comes out in front in each test, particularly in its advanced mode, where it "minimizes code size about 20-25% more than YUI Compressor by providing nearly 60% compression."

Solution 3:

Closure can be used in the Simple mode or the Advanced mode. Simple mode is fairly safe for most JavaScript code, as it only renames local variables in functions to get further compression.

Advanced mode is much more aggressive. It will rename keys in object literals, and inline function calls if it can determine that they return simple values with no side effects.

For example:

function Foo()
{
  return "hello";
}

alert(Foo());

is translated to:

alert("hello");

And this code:

var o = {First: "Mike", Last: "Koss"};
alert(o);

is translated to:

alert({a:"Mike",b:"Koss"});

You can prevent the Advanced mode from changing key values in object literals by quoting the names like this:

{'First': "Mike", 'Last': "Koss"}

You can try out these and other examples at google's interactive Closure Compiler site.

Solution 4:

Looks like jQuery 1.5 just moved to UglifyJS:

Additionally with this switch we’ve moved to using UglifyJS from the Google Closure Compiler. We’ve seen some solid file size improvements while using it so we’re quite pleased with the switch.