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

Lets compress some JavaScript If you are a JavaScript Programmer then you must be aware of the fact that you not only need to code your script properly but also you need to make the size as low as possible! But while scripting the code, obviously our attention stays on making the code unique, stylish and easy to debug! We add lots of comments inside the code to make things easy to remember and debug and often over look the size! It may sound weird, but if can remove the line spaces, line breaks and our comments, then we can at least save up to 40% of the size! Now that is really something to think isn’t it?

But again, after spending so much of time on coding, it really becomes hectic to manually remove all the line breaks and comments! So, today we are going to share some online toolkits to do the job for us! Below we have pointed the reasons behind minifying JavaScript codes and also how to do them with ease…

1: JSCompress.com ~ Online JS Compressor:

jsCompress

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:

vLead.in

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:

minifyJavaScript

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:

YUI Compressor best one yet!

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:

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!

3 comments

  1. Tech-Freak Stuff

    Remember that we cannot use this for decreasing the size of the Google adsense code! It wont matter much except for being banned by adsense[that too with very less chances] !!

  2. Swashata

    Of course not! This is for your own projects or for compressing any jQuery or other JS framework or plugins! Like in my own project https://www.intechgrity.com/2009/08/jquery-recent-… I have used the YUI compressor to compress the 9KB source code into a 3KB minified version! Also Adsense dynamically loads other scripts as well! So there is no point on modifying the adsense code [Which is also against the Google TOS]

Comments are closed.