Minify n Compress Your JavaScript for better Performance ~ Howto & Why!

1: JSCompress.com ~ Online JS Compressor:

I have been using this for sometime and have never got error anytime! I have been working on my first jQuery plugin for sometime and after completing the plugin today [Which is likely to get tomorrow! A surprise for all blogger 😉] it compressed it to half of the size. If you don’t want to use any desktop software then this is perfect tool for you! Do test it and let us know how this has worked for you!

• You can either minify the your JavaScript code using JSMin algorithm or Pack it using famous edwards method. I shall recommend to use Minify method only as it helps us to counter any possible error!
• You can also upload your JS files instead of copy pasting!
• Size reduction up to 50%

Link: Click Here

2: vLead.in ~ Another JavaScript Minify tool:

This one is equally powerful as before! Just put code and hit the button! See your JS minified into 50% of the size…

Link: Click Here

3: MinifyJavaScript.com ~ JS compressor with Advanced options:

Another good site for compressing your JS files online! You can also access some advanced options if you want! But personally I have got some troubles using this site! Basically I think the algorithm used is same as edwards and it does give some errors. So using the earlier two is recommended!

Link: Click Here

4: Yahoo UI Compressor ~ Best Java based JS and CSS Compressor:

The word BEST is at its best value! If you can run a command window or Terminal window and have the latest version of java (Very much easy) then you will find this tool to be best ever! Below are the links of some Tutorial explaining the procedure and thing you need to download:

• Download: Latest version of Java
• Download: Yahoo UI Compressor
• Step by Step Usage Tutorial: at chris-barr(MUST SEE)
• Official Tutorial: Check Here

Btw, I have used both the first and the YahooUI method and no doubt I have found the yahoo UI Library: UI compressor the best!

5: Why to use all these compressor to Minify my JS?

Nice question! Below are some sample codes:

1. Before Compression:

   function supscriptss() {

       findPositions();

       var text = area.value;

       if (startPosition!=endPosition) {

           var sbStr = text.substring(startPosition,endPosition);

           sbStr = '<sup>' +sbStr +'</sup>';

           fillsFormattedString(text,sbStr);

       }

           else {

           var con = confirm("Please select some text fisrt!! Press ok to merge formatting codes at the position of your cursor or cancel to return");

           if (con==true) {

               sbStr = '<sup></sup>';

               fillsFormattedString(text,sbStr);

           }

       }    

   }

   function linkify() {

       findPositions();

       var text = area.value;

       if (startPosition!=endPosition) {

           var sbStr = text.substring(startPosition,endPosition);

           var linki = prompt('Enter Web URL', 'http://');        

           sbStr = '<a href="'+linki+'">'+sbStr+'</a>';

           fillsFormattedString(text,sbStr);

       }

           else {

           var con = confirm("Please select some text fisrt!! Press ok to merge formatting codes at the position of your cursor or cancel to return");

           if (con==true) {

               var linki = prompt('Enter Web URL', 'http://');            

               sbStr = '<a href="'+linki+'"></a>';

               fillsFormattedString(text,sbStr);

           }

       }    

   }

2. After Compression:

   function supscriptss(){findPositions();var c=area.value;if(startPosition!=endPosition){var b=c.substring(startPosition,endPosition);b="<sup>"+b+"</sup>";fillsFormattedString(c,b)}else{var a=confirm("Please select some text fisrt!! Press ok to merge formatting codes at the position of your cursor or cancel to return");if(a==true){b="<sup></sup>";fillsFormattedString(c,b)}}}function linkify(){findPositions();var d=area.value;if(startPosition!=endPosition){var c=d.substring(startPosition,endPosition);var b=prompt("Enter Web URL","http://");c='<a href="'+b+'">'+c+"</a>";fillsFormattedString(d,c)}else{var a=confirm("Please select some text fisrt!! Press ok to merge formatting codes at the position of your cursor or cancel to return");if(a==true){var b=prompt("Enter Web URL","http://");c='<a href="'+b+'"></a>';fillsFormattedString(d,c)}}};

So you can yourself see, how much space can be saved by just minifying the source code! Also it has the following good impact on your website:

• Loads faster due to minimal size of the scripts
• You can even protect your script from being copied by just minifying it! As it becomes hard to read the code on minified version!
• As the size goes down you can use some more stylish codes as well!

So that was our quick tutorial on how to and why compress and minify your JavaScript files! I shall recommend you all to use the YUI Compressor as this is the best one! For all my projects I use only YUI Compressor and I am very much satisfied with it! I hope you like it as well.

Also do give your feedbacks and if you face any problem feel free to ask!