Tuesday, April 17, 2012

JavaScript Compression Tools Comparison

JavaScript compression consists of two processes: minification and obfuscation. Minification is a process of removing comments and unnecessary whitespace from a file. Obfuscation is a process of modifying code, changing the names of variables, functions, members, etc. to reduce the size of code. The following are some popular JavaScript compressors:

It’s very hard to say which one is better. That’s why during my projects, I always try to use all three and compare the output based on different facts. Here I’m going to share the output from one of my projects.

Before going to jump into scenarios, I want to talk about how to use these tools. Here are some command lines that you can use for compression:

Microsoft Ajax Minifier

Simple: ajaxmin script.js -o script-microsoft.js

Hypercrunch: ajaxmin -h script.js -o script-microsoft-h.js

Hypercruch Combine Literals: ajaxmin -hl script.js -o script-microsoft-hc.js

Google Closure

You can use online tool

OR

Simple: java -jar compiler.jar --compilation_level SIMPLE_OPTIMIZATIONS --js script.js

Whitespace: java -jar compiler.jar --compilation_level WHITESPACE_ONLY --js script.js

Advance: java -jar compiler.jar --compilation_level ADVANCED_OPTIMIZATIONS --js script.js

YUI Compressor

You can use online tool

OR

Simple: java -jar yuicompressor-2.4.2.jar script.js -o script-yahoo.js

Minified Only: java -jar yuicompressor-2.4.2.jar script.js --nomunge -o script-yahoo-m.js

Disabled Optimizations: java -jar yuicompressor-2.4.2.jar script.js --disabled-optimizations -o script-yahoo-o.js

Preserve Unnecessary Semicolons: java -jar yuicompressor-2.4.2.jar script.js --preserve-semi -o script-yahoo-s.js

During one my recent SharePoint internet site project I tried all three compression tools to compress JavaScript files. The following are the result comparison for one of those JavaScript files.

File Name Original Size Compressed Compressed & Gzip
YUI (Simple) Script-1 191 KB 77 KB 23 KB
YUI (Minified Only Script-1 191 KB 94 KB 26 KB
YUI (Disabled Optimizations) Script-1 191 KB 77 KB 24 KB
YUI (Preserve Unnecessary semicolons) Script-1 191 KB 78 KB 24 KB
Closure (Simple) Script-1 191 KB 74 KB 40 KB
Closure (Whitespace) Script-1 191 KB 94 KB 26 KB
Closure (Advance) Script-1 191 KB 58 KB 21 KB
Microsoft (Simple) Script-1 191 KB 76 KB 26 KB
Microsoft (Hypercrunch) Script-1 191 KB 76 KB 26 KB
Microsoft (Hypercrunch Combine Literals) Script-1 191 KB 76 KB 26 KB



Recommendation

As you can see in the above results Gzip results are almost same like 1 to 3 KB difference between all three tools. Due to following reasons I prefer to use Microsoft Ajax Minifier:

  • Works for both JavaScript and CSS
  • Visual Studio Integration
  • MS Build task to automate project builds along with minification process
  • JavaScript code analysis capabilities
  • Code formatting capabilities
  • Out-the-box multi file combining capability

1 comment:

  1. you can try this free online service to obfuscate javascript, it's using Yui compressor tool.

    ReplyDelete