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

Shortening JavaScript files with the ADVANCED OPTIMIZATIONS option - AJAX

In this fifth part of the series, you will learn how to work with the “ADVANCED_OPTIMIZATIONS” option provided by Google’s Closure Compiler Service API. It can be used to perform a more sophisticated optimization process on JavaScript snippets. If you ever need to minify your client-side scripts to their minimal expression, using this option is undoubtedly the way to go.

TABLE OF CONTENTS:
  1. Google's Closure Compiler Service API: the ADVANCED_OPTIMIZATIONS Option
  2. Shortening JavaScript files with the ADVANCED OPTIMIZATIONS option
By: Alejandro Gervasio
Rating: starstarstarstarstar / 0
October 06, 2010

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

To be frank, optimizing JavaScript code via the “ADVANCED_OPTIMIZATIONS” option is a straightforward process, reduced to assigning this value to the “compilation_level” argument accepted by the Closure Compiler and nothing else. Naturally, the most efficient way to understand the internals of this process is by example, so below I created a new one which passes this option to the compiler’s API. Here it is:

<?php

// example using optimization level = ADVANCED_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' => 'ADVANCED_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 compíled JavaScript function
    $response = $compilerHandler->sendRequest();
    $compilerHandler->sendHeader('js');
    // print to screen the compiled JavaScript function
    echo $response;
}
catch (Exception $e) {
    echo $e->getMessage();
    exit();
}

Definitely, applying more sophisticated optimizations to a JavaScript snippet via the mentioned “ADVANCED_OPTIMIZATIONS” option is a breeze. As you can see above, the task is as easy as assigning this option to the “compilation_level” argument of the compiler and finally passing the required parameters to the corresponding API. It’s all that it takes.

Logically, the previous example would be somewhat incomplete if I don’t show you how the target JavaScript file looks after it is parsed by the Closure Compiler. In the segment below I’m going to list the file’s compiled version, so you’ll be able to see more clearly the work that the compiler does behind the scenes.

Now, hurry up and read the next few lines.

The compiled version of the JavaScript file

As I promised in the section that you just read, below there’s the output generated by the Closure Compiler Service API after optimizing the previous JavaScript file. Take a look at it, please:

var a=document.createElement("div");a.setAttribute("id","divid");a.setAttribute("class","divclass");document.getElementsByTagName("body")[0].appendChild(a);

Well, that looks pretty interesting, doesn’t it? As you can see, the compiler has been more strict (if the term is really applicable in this case); not only has stripped the file’s white space and comments, but it has also shortened its variable names, and even completely removed the function’s declaration! Nevertheless, the script remains fully functional and performs exactly the same original task. Give it a try and see it for yourself.

This shows you the remarkable abilities of the Closure Compiler Service API when it’s instructed to apply more advanced algorithms to supplied JavaScript code. As usual, the best way to see how the “ADVANCED_OPTIMIZATIONS” option works is by practice, therefore I suggest that you develop your own set of examples and see the results that you get in each case.    
 
Final thoughts

In this fifth part of the series, you learned how to work with the “ADVANCED_OPTIMIZATIONS” option provided by Google’s Closure Compiler Service API, which can be used for performing a more sophisticated optimization process on JavaScript snippets. If you ever need to minify your client-side scripts to their minimal expression, using this option is undoubtedly the way to go. 

In addition, it’s worth noting that all of the examples developed so far have outputted compiled files in “text/javascript” format, which covers most use cases. However, the Closure Compiler Service API is capable of delivering compiled code in  XML and JSON as well with the same ease. Therefore, in the forthcoming tutorial I’m going to explore this feature in depth, so that you can start using it within your own web applications.

Don’t miss the next part!



 
 
>>> 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: