Shortening JavaScript files with the ADVANCED OPTIMIZATIONS option - AJAX

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!