Google Closure Compiler with jQuery applications

Question

I have a lot of time invested in jquery and a large application built with it. Recently I've been reviewing Google Closure Library, but at this time have found it to be not nearly as elegant as jquery. I believe it may have some potential and will look into it more, but for now I intend to continue using jQuery as my base framework.

However, I'm extremely impressed with Google Closure Compiler. I would love to start using it during the build process of my application. Unfortunately, it isn't exactly clear how easy it will be to use it for projects that do not follow the standard Google Closure standards.

Are there any best-practices or good resources on developing jquery-based projects and using the Google Closure Compiler? For instance:

1. Does it make sense to compile jquery and jquery-ui with it, or should I continue pointing to these resources on the google CDN? I'm sure my jquery and jquery-ui will be smaller since I don't use all features of the libraries, but pointing to a CDN increases the the chances the file is already be in a visitor's cache.

2. My application is split into many files, with a file per function. I'd like to combine them in a specific order and minify them into a file per section on my site. I'd like to automate this process.

3. Currently my project has a java backend and is built with Maven. Does it make sense to add Google Closure Compiler to this build process?

Basically, I'm looking for any good resources that are specific to using Google Closure Compiler with jQuery.

Answer 1

Google Closure Compiler is jQuery or any other library agnostic. It has two types of optimizations -

• Simple
• Advanced

I tried applying advanced optimizations, but it severely broke my application. If it does the same, you could either try to fix your application, or use simple optimization. There was a 32% drop in size with simple optimizations, and around 68% with advanced optimizations, but that didn't work out anyways.

Moving the JS concatenation in an automated fashion to your build process is definitely the way to go. See JavaScript dependency management.

jQuery is already heavily optimized for byte-size, so I doubt you will be able to squeeze enough juice by using Google Closure Compiler, but it's worth a try when combined with your project.

I see Google Closure Library in a favorable light, but haven't gotten to using it, as I'm heavily invested in MooTools at this point. Looking at it's API, it seems it has a rather broad coverage on what it has to offer besides just DOM manipulations, AJAX handling, event handling etc.

Answer 2

$(elem)['width']() instead of $(elem).width()

This works with ADVANCED_OPTIMIZATIONS, so that the closure compiler doesn't refactor the jQuery methods.