bojanpejic.com » compressor http://bojanpejic.com Scrap Book About Web – Programming – Development – Places, and more 8-) Sun, 16 May 2010 14:37:56 +0000 en hourly 1 Compress JavaScript with Google Closure http://bojanpejic.com/compress-javascript-with-google-closure/ http://bojanpejic.com/compress-javascript-with-google-closure/#comments Sun, 16 May 2010 14:37:56 +0000 bojan http://bojanpejic.com/?p=140 Google Closure is  a set of closure tools which contains a JavaScript optimizer, a comprehensive JavaScript library and a templating system for JavaScript & Java. It’s available on Google Code page. In this post will focus on JavaScript optimizer and how can we optimize a JavaScript file, and if you interested in other possibilities of Closure you should also visit it’s page. (This post generally continues one of my previous posts How to Compress JavaScript code.) There are three methods with we can do our JavaScript optimizing with Google Closure.

#1 method

First is the simplest, just visit closure-compiler.appspot.com and you’ll get an online Closure Compiler in your browser. There you have to give an URL to your script or paste it to textbox, chose an optimization method from one of the available ones (whitespace, simple or advanced) and if you don’t know which one to use, chose link to Which one is right for my code? where is explained how the optimization work. Also you can check from one of the available formatting options, pretty print and print input delimiter. If you check the pretty print formatting option your compiled code will get a formatted code output and not single line one.

#2 method

Second method is using Closure Compiler Service API! It’s something like I mentioned in first method. You create a page with a textbox, paste your code and submit it! Form posts your script to Closure Compiler and returns the minified code back to you and shows it. How the HTML code looks? Take a look below or on Closure Compiler page here.

<html>
  <body>
    <form action="http://closure-compiler.appspot.com/compile" method="POST">
    <p>Type JavaScript code to optimize here:</p>
    <textarea name="js_code" cols="50" rows="5">
    function hello(name) {
      // Greets the user
      alert('Hello, ' + name);
    }
    hello('New user');
    </textarea>
    <input type="hidden" name="compilation_level" value="WHITESPACE_ONLY">
    <input type="hidden" name="output_format" value="text">
    <input type="hidden" name="output_info" value="compiled_code">
    <br><br>
    <input type="submit" value="Optimize">
    </form>
  </body>
</html>

#3 method

This one is my favorite! It does the same like any other mentioned method before, but with this method you can easily include several files to bi minified/compress to one :) What you need for start is to download Closure Compiler Application. You create a working directory where you put your downloaded Closure Compiler Application. Copy the JavaScript file(s) you want to compile to Closure Compiler working directory, and now let’s do some compiling!

First example with one input file:

java -jar compiler.jar --js myfile.js --js_output_file myfile.min.js

Second example with two or more input files:

java -jar compiler.jar --js myfile1.js --js myfile2.js  --js myfile3.js --js_output_file myfile.min.js

So, through Java we execute the Closure Compiler Application compiler.jar. With option –js we define the input JavaScript file we want to compile, and with –js_output_file is defined the output file name which is compiled. In second example is shown how can be added more than one JavaScript file to be compiled.

For Closure Compiler help type:

java -jar compiler.jar --help

It is also available setting Closure optimizations through application, if you want to make Advanced optimization:

java -jar compiler.jar --compilation_level ADVENCED_OPTIMIZATIONS --js myfile.js

I find this Closure Compiler Application very handy, and if I need to compress JavaScript file it is my first choice right now. Maybe it will be interesting in feature to make some compares about sizes of compressed and non-compressed codes, but if you do it online on Closure Compiler page you will see some calculations about size right away. For more details about Google Closure Compiler visit it’s homepage.

]]> http://bojanpejic.com/compress-javascript-with-google-closure/feed/ 1 How to Compress JavaScript Code http://bojanpejic.com/how-to-compress-javascript-code/ http://bojanpejic.com/how-to-compress-javascript-code/#comments Wed, 28 Oct 2009 10:26:17 +0000 bojan http://bojanpejic.com/?p=34 how to compress javascriptIn past few months and recently I did some JavaScript coding. The whole source code wasn’t so big, around 15kB, but it may be growing more, and there are also other JavaScript files which are included in the page and maybe I merge them. To reduce amount of data and in hope to little speed up loading of the page I was looking for some options to compress (minify) the source code.

What means to minify JavaScript?

One more term which is used for reducing the size of code is minification or minify.

Minification (very often just minify, and sometimes also minimisation or minimization), in computer programming languages and especially JavaScript, is the process of removing all unnecessary characters from source code, without changing its functionality. These unnecessary characters usually include white space characters, new line characters, comments and sometimes block delimiters; which are used to add readability to the code, but are not required for it to execute. – wikipedia.org

Why to compress/minify?

In putting to a simple way the whole quote above, compress (minify) the code to load it faster! Beside that you’ll reduce the bandwidth consumption of website, and number of HTTP requests if you combine several JavaScript files in one.

Tools for compress/minify

Searching over Internet I found several tools which are commonly used for compressing JavaScript code, these tools for compress are:

JSMin – is a filter which removes comments and unnecessary whitespace from JavaScript files. It typically reduces filesize by half, resulting in faster downloads. It also encourages a more expressive programming style because it eliminates the download cost of clean, literate self-documentation.

Dojo compressor – in the design of the the Dojo compressor,  instead of brittle regular expressions, the Dojo compressor is based on Rhino, a JavaScript engine from the Mozilla project.

Packer v3.0 – some features of it are respect Microsoft conditional terms, new option to shrink variable and argument identifiers, removed the special chars feature (except the ;;; feature which people seem to like) etc.

Google minify -  is a PHP5 app that helps you follow several of Yahoo!’s Rules for High Performance Web Sites. It combines multiple CSS or Javascript files, removes unnecessary whitespace and comments, and serves them with gzip encoding and optimal client-side cache headers.

YUI compressor – The YUI Compressor is a JavaScript compressor which, in addition to removing comments and white-spaces, obfuscates local variables using the smallest possible variable name. This obfuscation is safe, even when using constructs such as ‘eval’ or ‘with’ (although the compression is not optimal is those cases) Compared to JSMin, the average savings is around 20%.

Note: it’s possible to make gzip compression of code, which are supported natively by modern web browsers, and also shrink previously minified JavaScript file.

Which one to use?

Well that’s a personal decision, I read some posts and articles over Internet and most of them suggests YUI compressor, but it don’t means that you have too.

On web page called JavaScript CompressorRater you can found details and analyzes how successful are different compression tools in action. Compression is done on popular JavaScript libraries. I recommend to visit it, at least you can get some view on their success in action.

Online compress tools

Here are some online compress tools for beginning:

In some of next posts I’ll try to explain how to make it done on your computer, not with an online compress tool. Happy compressing!

]]> http://bojanpejic.com/how-to-compress-javascript-code/feed/ 3