如何在使用库时利用闭包编译器？

Question

I've recently been playing with the awesome tool from google that does some code-optimization and partial execution, for instance it would take something like:

//Just an alias for an elementByID selector
function $(bar){
    return document.getElementById(bar);
}

//Call the selector
alert($("foo").value);

And shorten it into alert(document.getElementById("foo").value); , which is fairly awesome from an optimization viewpoint.

I'm only explaining this because I would have thought this concept works for larger libraries such as jQuery, which basically attempts to abstract away a bunch of things JavaScript does, like select by IDs.

In a quick test, I loaded the whole jQuery production file up to the compiler and appended a single bit of text at the end of it: alert($("#foo").val());

And quite tragically, the compiler wasn't able to map through jQuery's design and result with the simple example I had above, but rather my output is about 85kb of text with alert($("#foo").K()); stuck on the end. Basically, I just have minified code, and didn't take advantage of the awesome feature demonstrated above.

So my question is, if I do end up using a library, how can I code in such a way that closure compiler is able to simplify my code to it's native JS (or something more effective than 85kb of unused code)? Alternatively, what design should someone take if they wanted to make a small library that plays nice?

Answer 1

AFAIK, jQuery is not (yet) written to be optimized by the Closure Compiler's Advanced Mode. It has an "externs" file which will enable its public properties and classes not to be renamed, but it does not enable most of the optimizations (eg dead code removal) as you've discovered. Which is quite a pity, because the jQuery object, if property written, does lends itself quite readily and nicely to the Closure Compiler's prototype virtualization feature.

Slightly off-topic

If you are not tied to jQuery, you may consider the Dojo Toolkit, which can be modified to be used with the Closure Compiler while enabling most optimizations (especially dead-code removal).

See this document for details.

Answer 2

jQuery takes special pains to minify itself and in the process makes itself opaque to the Closure Compiler.

Closure Library is an example of a library that is written to make good use of the Closure Compiler.

Generally, the compiler does best with prototype inheritance and simple structures:

/** @constructor */ function Class () {} Class.prototype.f = function() {};

With an explicitly exported interface: window['MyLib'] = { 'method', method };

Generally, advanced mode only makes sense for a library if it has a small external interface relative to the amount of internal code. However, I definitely would encourage writing your library so that it can be consumed by an advanced mode compiled project (this requires separating out the export used when it is used as a stand-alone library, if they library itself is minified using advanced mode).