|
One
of the best practices to increase our site performance is to reduce the
JavaScript file size and saving time for downloading it. On 5th of
November 2009, Google has announced the release of Google Closure Compiler.
So, what is that all about? In a nutshell, Closure Compiler is a tool
that is used to rewrite our JS code to make it faster and more compact.
In this post, I will go through with you, how can we build and compile
our JS code with this optimizer on Windows platform.
To run the compiler on our machine, we need Java 6 or higher to be
installed. If you have already had Java 6 or higher installed, just
grab a Closure Compiler executable file. There are three ways for
getting it:
1) The pre-built version - it can be found and downloaded at: http://code.google.com/p/closure-compiler/downloads/list
2) Check out the source and build it with Apache Ant
3) Check out the source and build it with Eclipse.
However, I will not explain into details for 2) and 3). I will use
the pre-built version for compiling JS file instead. So, before we run
the closure compiler, we need the executable file first. Just download
the latest copy from this link.
Once we have downloaded the compressed folder, extract all files and
locate it in an empty folder, say 'work' folder. We should be able to
see 3 files inside, as follows:
As what you have seen, the compiler is in executable jar file format.
And, the 'README' is the guide of running this optimizer tool. Running
the compiler is pretty straight-forward, just follow these steps will
do:
1) Say, I would like to compress 'facebox' jQuery plugin which is
not compressed and the original file size is 10KB. What I want is to
reduce its file size so that my site is not taking much time for first
downloading the JS file. So, what I need to do is, copy the original JS
file to the 'work' folder, like so:
As you can see, the original file size is 10KB in the folder.
2) Next, open the Windows' command line, and change the directory to the 'work' folder, as the screenshot shown at below:
Change to 'work' directory
We are now at the 'work' folder. To execute the compiler, type in the following command:
java -jar compiler.jar command 3) Once we pressed 'Enter', this starts the compiler in interactive
mode. The next thing we need to do is to type in 'var x = 17 + 25;' ,
just as follows:
4) Next, hit the 'Enter' key once we are done, and then hit the
'Ctrl-Z' keys and once again, hit the 'Enter' just after the 'Ctrl-Z'.
The compiler will respond to us as 'var x=42;', as shown in this
following srceenshot:
5) OK now, basically we are able to rewrite and compile our JS file
at this stage. The optimizer tool has many options to read the input
file and checking our code and so on. Such as, how to compile multiple
JS files, etc. However, we will focus on one file in this tutorial. To
compress and reduce 'facebox' plugin file, type in and run the
following command:
Recompile 'facebox' js file
To make it clearer, this command should be something like this:
java -jar compiler.jar --js facebox.js --js_output_file facebox-compiled.js Please take note that, you are free to name the output of your JS file. In this case, I named it as 'facebox-compiled.js'.
6) Open the 'work' folder again after the command is executed, you
should be able to see an additional file (facebox-compiled.js) inside
the folder:
'facebox-compiled.js' file
If you have noticed, the original file size has been reduced from 10KB
to 5KB, which is 50% of reduction with the file size! To see the code,
open the compressed file with your preferred text-editor, you should be
able to see the code has been optimized and rewritten as well as
obfuscated. This will prevent visitors to read your JS code straight
from their browser's 'View Source' option. Below is the example how
does the code look like:
Optimized, rewritten, obfuscated JS code To learn more about Closure Compiler, please visit: http://code.google.com/closure/compiler/docs/gettingstarted_app.html. Hope you enjoyed it.
Conclusion:
Google Closure Compiler is a powerful optimizer tool to analyze and
rewritten our JS code. It will greatly reduce our file size as well. JS
file size should always be concerned for the sake of the site
performance.
|