How to use closure compiler when using library?

Question

I recently played with a terrific tool from Google that does some code optimization and partial execution, for example, it would require something like:

//Just an alias for an elementByID selector function $(bar){ return document.getElementById(bar); } //Call the selector alert($("foo").value); 

And shorten it to alert(document.getElementById("foo").value); , which is quite surprising in terms of optimization.

I just explain this because I thought this concept worked for large libraries such as jQuery, which basically tries to distract a bunch of things that JavaScript does, like picking by identifiers, for example.

In a quick test, I downloaded the entire jQuery production file to the compiler and added one bit of text at the end: alert($("#foo").val());

And quite tragically, the compiler could not match the jQuery design and the result with a simple example that I had above, but my output is about 85 KB of text with alert($("#foo").K()); stuck in the end. Basically, I only had a small code, and it did not use the excellent function demonstrated above.

So my question is: if I end up using the library, how can I code so that the closure compiler can simplify my code for it with native JS (or something more efficient than 85kb of unused code)? Alternatively, what design should someone take if they want to create a small library that plays well?

Answer 1

AFAIK, jQuery has not yet been written for optimization using the Closure advanced compiler mode. It has an externs file that prevents its public properties and classes from being renamed, but it does not allow most optimizations (like removing dead code), as you discovered. Which is very unfortunate because the jQuery object, if the property is written, is quite easy and easy to use the prototype virtualization function Closure Compiler.

A little off topic

If you're not tied to jQuery, you might want to consider the Dojo Toolkit, which can be modified to be used with the Closure compiler while using most of the optimizations (especially dead code removal).

See this document for more details.

Answer 2

jQuery makes special efforts to minimize itself and in the process makes it opaque to the Closure compiler.

The Closure Library is an example of a library written to leverage the Closure compiler.

Typically, the compiler works best with prototype inheritance and simple structures:

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

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

As a rule, the advanced mode only makes sense for the library if it has a small external interface relative to the amount of internal code. However, I will definitely recommend writing your library so that it can be used by a compiled project with advanced mode (this requires sharing the export used when it is used as a stand-alone library, if the library itself is minimized using advanced mode).