Home arrow AJAX & Prototype arrow Page 2 - Google's Closure Compiler Service API: the SIMPLE_OPTIMIZATIONS Option

Using the SIMPLE OPTIMIZATIONS option - AJAX

In this fourth part of the series, I show you how to apply a more rigorous level of optimization to a JavaScript file by passing the SIMPLE_OPTIMIZATIONS option to the Closure Compiler API. This process removes white space and comments, and shortens function and variable names, which significantly reduces the size of the target file.

TABLE OF CONTENTS:
  1. Google's Closure Compiler Service API: the SIMPLE_OPTIMIZATIONS Option
  2. Using the SIMPLE OPTIMIZATIONS option
By: Alejandro Gervasio
Rating: starstarstarstarstar / 1
October 05, 2010

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

 
To be frank, making the Closure Compiler Service API optimize JavaScript code in a more clever way is a straightforward process limited to assigning the value “SIMPLE_OPTIMIZATIONS” to its “compilation_level” parameter, and nothing else. As usual, the best way to see the real functionality of this option is by example, so below I coded one that employs the option with the JavaScript file shown in the previous section. Here it is:
  
<?php

// example using optimization level = SIMPLE_OPTIMIZATIONS
try {
 
    // include the autoloader class
    require_once 'Autoloader.php';
    Autoloader::getInstance();

    // create an instance of the file handler class and read the specified JavaScript file
    $fileHandler = new FileHandler;
    $js = $fileHandler->read();
   
    // build the array of arguments that will be passed to the closure compiler API
    $data = array(
         'js_code' => $js,
         'compilation_level' => 'SIMPLE_OPTIMIZATIONS',
         'output_format' => 'text',
         'output_info' => 'compiled_code'
    );
   
    // create an instance of the ClosureCompilerHandler class
    $compilerHandler = new ClosureCompilerHandler($data);
    // query the closure compiler API and get the compiled JavaScript function
    $response = $compilerHandler->sendRequest();
    $compilerHandler->sendHeader('js');
    // print to screen the compiled JavaScript function
    echo $response;
}
catch (Exception $e) {
    echo $e->getMessage();
    exit();
}

As you’ll agree, the above example looks very similar to the one developed before, doesn’t it? Don’t get confused by this first impression, however, as there’s a small --yet relevant-- difference worth spotting. In this case, the SIMPLE_OPTIMIZATIONS option has been passed via the corresponding POST request to the Closure Compiler API.

According to the API’s official documentation, when the compiler is fed this option, it not only will remove all of the white space and comments from the target JavaScript file, but it’ll shorten all of its function and variable names when possible. But is that actually happening with the earlier JavaScript file? Well, the only way to find out the answer is to take a look at the file after it has been processed by the compiler.

That’s exactly what I plan to do below, so keep reading. 

Finishing the example: the compiled version of the target JavaScript file

If you’re anything like me, you want to see the results generated by the previous PHP script, right? Well, here’s the output that the Closure Compiler API returns to the client when used with the SIMPLE_OPTIMIZATIONS option:

function createDiv(b,c){var a=document.createElement("div");a.setAttribute("id",b);a.setAttribute("class",c);document.getElementsByTagName("body")[0].appendChild(a)}createDiv("divid","divclass");
 
Bear with me if I sound like I'm overreacting a bit, but this file definitely looks good! As you can see, not only have all of its white space and comments been properly removed, but all of the variable names has been shortened to a single character (a, b, c).

While this is nothing but a simple (not to say simplistic) example of how to use  Google’s Closure Compiler, it shows in a nutshell how powerful it can be for to optimizing JavaScript files painlessly. In the example above, the SIMPLE_OPTIMIZATIONS option has been utilized to compile JavaScript code a bit more “strictly;” nevertheless, the compiler is capable of performing more advanced optimizations, as usual via its “compilation_level” parameter.

However, this ability will be covered in detail in the following article of the series. So, in the meantime feel free to introduce your own tweaks to all of the code samples developed before. Doing so will arm you with a better understanding of how to use Google’s Closure Compiler API in a truly effective way.

Final thoughts

In this fourth part of the series, I provided you with a concrete example that showed how to apply a more rigorous level of optimization to a JavaScript file by passing the SIMPLE_OPTIMIZATIONS option to the Closure Compiler API. As you just saw, this process removes white space and comments and also makes function and variable names considerably shorter, which significantly reduces the size of the target file.

In the next chapter, I’m going to explain how to instruct the Closure Compiler API to optimize JavaScript code even more efficiently via a brand new option called “ADVANCED_OPTIMIZATIONS.” Want to see how to put this option to work for you? Then don’t miss the upcoming tutorial! 



 
 
>>> More AJAX & Prototype Articles          >>> More By Alejandro Gervasio
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

AJAX & PROTOTYPE ARTICLES

- Best AJAX Tutorials for Forms
- The Best AJAX Tutorials
- 8 Great Ajax Tutorials
- Using Ajax and jQuery
- Using Ajax and jQuery with HTML Forms
- Ajax.org Offers Cloud9 IDE for JavaScript
- Java Technologies Provider ICEsoft Releases ...
- Using Recaptcha in AJAX Prototype Framework ...
- Google's Closure Compiler Service API: Addit...
- Installing Google Web Toolkit: Introducing t...
- Google's Closure Compiler Service API: Displ...
- Google's Closure Compiler Service API: Deliv...
- Google's Closure Compiler Service API: the A...
- Google's Closure Compiler Service API: the S...
- Google's Closure Compiler Service API: Optim...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: