How to Compress Javascript File Using Closure Compiler

Previously we have discussed how to compress javascript file using YUICompressor, still about compression tool, today we’ll discuss how to compress javascript file using Closure Compiler.

Closure compiler is one of the most popular javascript compressors, it actively developed and the developer itself is the giant – Google.

Table of content:

I. Install Java Runtime Environment

To be able to use closure compiler, we need to install Java Runtime Environment (JRE) version 7 and above.

To check whether the JRE is installed in our system and also check whether the installed version is 7 and above, simply open a command prompt and run java --version

If Windows does not recognize the command or JRE version is below 7, then we need to install it.

In the above examples, the installed version is 8 (displayed: 1.8.x)

If you want to download the JRE, please go directly to the page of Java SE – Download and find the JRE download link, then click on the link

On the next page click “Accept License Agreement” and select the installation file (.exe) that you want to download. If you are using 64 bit of windows, it does not matter if you install the 32-bit version.

II. Download Closure Compiler (.jar file)

Next, we need to download the closure compiler jar file, you do not need to download from Github repo, because all of them are the source code, not the .jar (Java Archive) file that we are looking for.

Download it directly from the Google’s site through the link: compiler-latest.zip

The zip file contains the compiler.jar file which we will use later.

III. Compress Javascript File Using Closure Compiler – Resulted Errors

Now, let’s talk about how to compress javascript file using closure compiler, the steps are:

1. First, let’s create a working directory where we will put all working files  (the .jar and javascript files). For example, we create a directory named compress on an E drive.
2. Next, extract the compiler.jar file from the compiler-lastest.zip file, also, copy all the javascript files that we want to compress to the directory, for example, we’ll use jquery-1.12.4.js file
3. Open the windows command prompt and navigate the cursor to the directory, and then run a command using format: java -jar path/to/compiler.jar --js path/to/sourcefile --js_output_file path/to/outputfile

   in this case, we’ll run a command: java -jar compiler.jar --js-1.12.4.js --js_output_file jquery jquery-1.12.4_min.js

   

   The result is:

   

   The file size is decreased about 61.32%.

4. For maximum compression use an option: --compilation_level ADVANCED_OPTIMIZATIONS, change the command into the following:

   java -jar compiler.jar --js jquery-1.12.4.js --compilation_level ADVANCED_OPTIMIZATIONS --js_output_file jquery-1.12.4_min.js

   The result is:

   

   Using the Advanced Compression, the compressed file size is reduced by 69%, BUT it is important to note that this mode is NOT 100% safe, and in the example above, the compressed file is ERROR – not working, we’ll discuss it later.

   

The Notice – The Warning

When compressing jquery file, there are 12 warnings, what is it?

By default, closure compiler will raise a warning message when there is an unusual code, the most often warning is “Suspicious code” warning, it tell us that there is a code that does not give any effect (useless code), so it better to remove it.

for example:

$(document).ready(function()
{
	$('label').click(function(){
		$('#' + $(this).attr('for').checked = true; //checkbox
	})
})

the $('#' + $(this).attr('for').checked = true; code actually gives no effect because when the label is clicked, then the checkbox will be “checked” with or without javascript code.

Compression Level

Closure compiler provides two kinds of levels compression that are SIMPLE_OPTIMIZATION and ADVANCED_OPTIMIZATION the differences between them can be directly seen here.

In short, the difference is: simple optimization just shorten only certain items such as some variable, function arguments, change the true statement into !0, etc., but in certain circumstances it does not change the variable name.

While for advanced optimization, closure compiler will absolutely (if necessary) rearrange the structure of our code so the compressed file become more compact.

III. Important…

It is important to note that when using the ADVANCED_OPTIMIZATION, closure compiler has a “rule” that can break your javascript code:

1. Closure compiler will remove unused functions, so if you compress javascript file that contains functions that are not called within the entire code, then it will be removed, although it is actually used in another file or script.
2. Be careful while writing your code,  as the inconsistent in writing object property will generate an error on the compressed code, for example: in one place we write: shops['location'] whereas elsewhere we write shops.location

For more details please visit: Advanced Compilation and Extern

From the above behavior, the safe option is to use simple compression, but it does not give the smallest file size. You can give a try to use maximum compression, but make sure that the compressed file works, to test it, simply use the console at the chrome developer tools.

In Addition, by default closure compiler will add a line break on every 500 letter, it is due to some firewalls and proxy blocking javascript file with a very long character.

IV. Compress Multiple Javascript Files Using Closure Compiler

To compress a lot of files at once without combining them,  we can’t directly use closures compiler’s command, as it doesn’t provide such feature. We need a windows command to read each javascript files then compress it.

Suppose we’ll compress data.js, main.js, and shared.js files at the same time, to do so, we can use this command:

for %f in (data.js main.js shared.js) do java -jar compiler.jar --compilation_level ADVANCED_OPTIMIZATIONS --js %f --js_output_file %~nf.min.js

or if you want to compress all the javascript files within a directory, you can use the following command:

for %f in (*.js) do java -jar compiler.jar --compilation_level ADVANCED_OPTIMIZATIONS --js %f --js_output_file %~nf.min.js

The command will search for files that its name ending with .js and immediately run the closure compiler to compress the file. The output file name is the original file name  ( %~nf ) + .min.js

The sample result:

V. Combine and Compress Javascript File Using Closure Compiler

Sometimes we may want to combine some javascript files and then compress it afterward, to do so, we can use a command provided by closure compiler.

Continuing the previous example, we’ll combine the data.js, main.js, and shared.js files and then compress it, to do so, we use the following command:

java -jar compiler.jar --compilation_level ADVANCED_OPTIMIZATIONS --js data.js --js main.js --js shared.js --js_output_file merged.min.js

or if you want to merge all javascript files within a directory, you can use the following command:

java -jar compiler.jar --compilation_level ADVANCED_OPTIMIZATIONS *.js --js_output_file merged.min.js

Note: closure compiler will automatically repair any errors, such as the lack of semicolon (the code in the first file -data.js- doesn’t end with semicolon).

The result is:

VI. Automate The Process

If you frequently run the compiler using a command prompt, then consider to make it run automatically, at least it will reduce our repetitive task in opening and running a command prompt.

To do it, we need to create a .bat file. Simply open a text editor, such as Notepad and then type a command that we want to run, once finished save it with a .bat extension, eg: mergeall.bat (in the Save as type: selected All Files (*. *)), don’t forget to place it in the same directory with the working files (compiler.jas and javascript files)

For example, we’ll automatically compress each javascript file without combining them, then we write:

for %%f in (*.js) do java -jar compiler.jar --compilation_level ADVANCED_OPTIMIZATIONS --js %%f --js_output_file %%~nf.min.js

Important: note that the command is little different, in the .bat file we write %%f and %%~nf.min.js while at the command prompt we to write %f and %~nf.min.js

To run it, simply double-click the .bat file.

Furthermore

To learn more about the closure compiler, please visit the official website: Closure Compiler | Google Developers or run a command:

java -jar compiler.jar --help

Suggestion

In the advanced mode (ADVANCED_COMPRESSION), the use of closure compiler becomes complicated and unsafe, so you may want to try other alternative tools such as UglifyJs and YUICompressor.