Author: Robert Bowdidge, Software Engineer
Recommended experience: Some experience creating web pages.
The best way to make your web page more responsive is to minimize the number of files and size of files that must be downloaded when the page is loaded. Reducing the number of files loaded avoids hitting maximum simultaneous download limits in browsers. Reducing file size cuts the time needed to send all the bytes over the Internet. Some tools already exist to minimize files and file sizes. Spriting tools and image compression tools let you minimize the number and size of images; gzip and HTML compression tools let you reduce the size of your HTML files.
Example: What Can Closure Compiler Do For You?
As a starting example, imagine you're a web developer for a large newspaper, the Esmeralda Times, and you want to try optimizing the code for your home page. Go to the Closure Compiler web service UI at http://closure-compiler.appspot.com. Notice that the web application starts off with a simple Hello World example; if you click "Compile", Closure Compiler minimizes the code and shows it on the right hand side.
But you don't care about "Hello World"; you care about speeding up your web page.
// ==ClosureCompiler== // @output_file_name default.js // @compilation_level ADVANCED_OPTIMIZATIONS // @code_url http://www.esmeraldatimes.com/sitewide/sitewide.js // @code_url http://www.esmeraldatimes.com/sitewide/main.js // @code_url http://www.esmeraldatimes.com/js/ext/prototype/prototype.js // @code_url http://www.esmeraldatimes.com/js/ext/scriptaculous/scriptaculous.js?load=effects,dragdrop // @code_url http://www.esmeraldatimes.com/js/ext/scriptaculous/effects.js // @code_url http://www.esmeraldatimes.com/js/ext/scriptaculous/dragdrop.js // ==/ClosureCompiler==
Now, choose a compile mode. You have these choices:
Best of all, you can still debug this compressed code by generating a Closure Inspector source map. The Firebug debugger uses this source map to point you to the lines of original source code that correspond to the optimized code that you're debugging. Generating the Closure Inspector source maps requires running the Closure Compiler on your local machine using the source or pre-built jar files.
What Else Can Closure Compiler Do For You?
a = [1, 2, 3, ];) Some browsers create three elements in the array, others four; such inconsistencies can create some hard-to-track down bugs. Closure Compiler can also identify invalid math operations, code that can never be executed, or function calls where you're not passing enough arguments.
In Advanced Mode, Closure Compiler can also use type annotations in your code to find logic errors in your program - cases where you intend to pass a
Money object, but accidentally pass an
How Does Closure Compiler Work?
(15 * 280) + 16 with
4216. By doing this, it cuts 15 characters to 5. More importantly, it gives you the freedom to write your code in a clear and understandable way, and frees you from worrying about the final size of the code. Functions called in only one or two places can be inlined, replacing the function call with the contents of the function body, saving the space needed for the function declaration. Closure Compiler can even tell when two different variables are never used at the same time, letting both share the same name and ensuring that as many variables as possible use very short names for better gzip compression.