Question

I have manage to create a small size js application that uses jQuery and jQuery UI using google’s closure compiler with advanced optimizations. Just for clarity: I have not compiled jQuery itself, just my app that uses jquery. I would like to know if somebody can confirm that this idea also works for bigger and more complex apps.

The procedure is as follows:

0.- You have an html file that calls jquery-1.4.3.min.js, test1.js, and test2.js

1.- compile your app and export a property map file

java -jar closure-compiler.jar \
       --compilation_level ADVANCED_OPTIMIZATIONS \
       --js test1.js --js test2.js \
       --property_map_output_file prop.out > min.js

The property map is a key/value file that contains the name of the property before and after compilation:

aprop:a
html:b
each:c

2.- Copy prop.out to prop.in and edit it so that jQuery properties (functions) are replaced by the same name (this could be easily automated with a list jquery’s function):

aprop:a
html:html
each:each

3.- Recompile using prop in as property map input

java -jar closure-compiler.jar \
       --compilation_level ADVANCED_OPTIMIZATIONS \
       --js test1.js --js test2.js \
       --property_map_input_file prop.in > min.js

4.- Now in your html, include min.js and jquery-1.4.3.min.js. The application should be functional but your code should be faster and smaller.

This will minify your code, not jquery’s.

As I said, I have tested this in a small app. If somebody has a bigger and complex app, it would be nice to know that this works.

Thanks,

heg

Answer 1

Have you considered using externs. As far as I know that is the way to go to keep the jQuery methods from being shortened in your code. Externs for jQuery exist as contributions to the closure project.

For jQuery UI you might want to try this. It is something I came across once but haven’t tested it myself

BTW: If you’re interested, there is this extremely handy build tool for closure: Plovr. I use it all the time and I made externs work with it.