Google Closure Compiler: Optimize Javascript to reduce size and make it fast and effective

by · December 29, 2012

Google Closure Compiler is the smart way to optimize javascript code. This increases your website performance as it reduces the size and removes the dead code from the Javascript code. Google closure compiler gives us the 3 different ways for optimization of js code named as Closure Compiler Compilation Levels.

Closure Compiler Compilation Levels

Whitespace only, Simple, Advanced. These 3 have some of the features identical and some of features are different from each other.

1) Whitespace only: It removes the comments, line breaks, unnecessary spaces, and other whitespace from the code. Functionally the code works similer as the code before the compilation. The only fruit comes after the compilation is mainly the compiled size of the the code as compared to the original size. Whitespace only is the least powerful compression level in all of the 3 compression levels.

2) Simple Optimizations: It works similer to Whitespace only but it enhaces some of the things like renaming local variables and function parameters to shorter names.

This renames only symbols that are local to functions. This doesn’t affect the functionality of the java script. So, This is the 2nd poweful compression level.

3) Advanced Optimizations: It works similer to Simple Optimizations but it enhaces some of the things like more aggressive renaming, dead code removal, global

inlining. Please take care some of things when you are using Advanced Optimizations. Beacuse the compiled code may not works with your external code. Beacuse there may

be mismatches between the names in your code and in the external code. SO you must flag your external functions. If you want to know more about this please refer https://developers.google.com/closure/compiler/docs/api-tutorial3

This level is most powerful in all of the 3 compression levels. But must read the precautions before to use the Advanced Optimizations.

How to use Closure Compiler


Google provides very easy way to use this just click on the link http://closure-compiler.appspot.com/home

To use this you must have two things i.e yours Javascript code or javascript file link which is on your server.
If you have a link Just paste the link in the Add a URL section Example: http://www.example.com/bigfile.js and click on Add. This inserts your link to the ClosureCompiler input.
or if you have a Javascript code paste the code under // ADD YOUR CODE HERE
After that select the Optimization Level( Whitespace only/ Simple/ Advanced ) which is the most important part to do the compilation. Then click on Compile.

After the compilation you will get message like

 

Compilation was a success!

Original Size: 302.96KB (95.44KB gzipped)

Compiled Size: 289.49KB (92.83KB gzipped)
Saved 4.45% off the original size (2.73% off the gzipped size)
The code may also be accessed at default.js.

 

Here default.js is the link to get your compiled Javascript code or you can copy the code from Compiled code section.
If yours code have any type of errors or warnings. It also reflects there in Warnings, Errors section.

This is very important step taken by Google to save everybody’s time, beacuse webpage loading and loading is headache and no one has time to waste and wait. So, use this from today.

VN:F [1.9.22_1171]
Rating: 9.5/10 (6 votes cast)
VN:F [1.9.22_1171]
Rating: +4 (from 6 votes)
Google Closure Compiler: Optimize Javascript to reduce size and make it fast and effective, 9.5 out of 10 based on 6 ratings

You may also interested in: