JS Minification: Compressing the code

Question

A online tool, such as JSCompress, will reduce code size up to 80%. It's easy to notice that the result, compressed code, removes space. Beyond the removal of EOL and ' ' characters, is there any other trickery needed to minify a js file?

Example compressed:

function glow(e){$("#"+e).fadeIn(700,function(){$(this).fadeOut(700)})}function startLevel(){ptrn=[],pos=0,setLevel(lvl),$("#mg-lvl").fadeOut("slow",function(){$("#mg-contain").prop("onclick",null).off("click"),$("#mg-contain").css("cursor","default"),$(this).text("Level "+lvl+": "+ptrn.length+" blink(s)."),$(this).fadeIn("slow"),showLevel(0)})}function setLevel(e){ptrn.push(Math.floor(3*Math.random()+1)),0==e||setLevel(--e)}function showLevel(e){$("#b"+ptrn[e]+"c").fadeOut(speed,function(){$("#ball_"+ptrn[e]).fadeOut(speed,function(){$("#b"+ptrn[e]+"c").fadeIn(speed),$(this).fadeIn(speed,function(){e+1<ptrn.length&&showLevel(++e,speed)})})}),e+1==ptrn.length&&setTimeout(bindKeys(1),ptrn.length*speed+15)}function bindKeys(e){for(var e=1;e<4;e++)bind(e)}function bind(e){$("#ball_"+e).on("click",function(){$("#b"+e+"c").fadeOut(speed,function(){$("#ball_"+e).fadeOut(speed,function(){$("#ball_"+e).fadeIn(speed),$("#b"+e+"c").fadeIn(speed),referee(e)&&unbind()})})})}function referee(e){if(pos<ptrn.length&&(e===ptrn[pos]?$("#mg-score").text(parseInt($("#mg-score").text())+1):end()),++pos==ptrn.length)return++lvl,speed-=40,!0}function unbind(){for(var e=1;e<4;e++)$("#ball_"+e).off();startLevel()}function nestedFade(e,n,t){e[n]&&$(e[n]).fadeOut("fast",function(){t[n]&&($(e),t[n]),nestedFade(e,++n,t)})}function end(){for(var e=[],n=[],t=1;t<4;t++)e.push("#b"+t+"c"),e.push("#ball_"+t),n.push(null);e.push("#mg-contain"),n.push('.fadeOut("slow")'),e.push("#mg-obj"),n.push(".fadeOut('slow')"),e.push("#bg-ball-container"),n.push(".toggle()"),nestedFade(e,0,n)}var ptrn=[],pos=0,lvl=1,speed=400,b1=setInterval(function(){glow("ball_1b",700)}),b2=setInterval(function(){glow("ball_2b",700)}),b3=setInterval(function(){glow("ball_3b",700)});

Example uncompressed:

var ptrn = [];
var pos = 0;
var lvl = 1;
var speed = 400;

/* make balls glow */
function glow(id)
{
    $('#'+id).fadeIn(700, function(){$(this).fadeOut(700);})
}

var b1 = setInterval(function(){ glow('ball_1b',700) ,1500});
var b2 = setInterval(function(){ glow('ball_2b',700) ,1500});
var b3 = setInterval(function(){ glow('ball_3b',700) ,1500});
/* end */

function startLevel()
{
    ptrn = [];
    pos = 0;

    /* set pattern for the level */
    setLevel(lvl);  

    /* display prompt for level */
    $('#mg-lvl').fadeOut("slow", function(){
        $('#mg-contain').prop('onclick',null).off('click');
        $('#mg-contain').css('cursor','default');
        $(this).text("Level " + lvl + ": " + ptrn.length + " blink(s).");
        $(this).fadeIn('slow');

        /* play back the pattern for user to play */
        showLevel(0); //TODO: use promise and deferred pattern to pull this out of fade function.
    }); 
}

function setLevel(lvl)
{
    ptrn.push(Math.floor((Math.random() * 3) + 1));
    (lvl == 0 ) ? null : setLevel(--lvl);
}

function showLevel(i)
{
    /* blink the balls */
    $('#b'+ptrn[i]+'c').fadeOut(speed, function(){
        $('#ball_'+ptrn[i]).fadeOut(speed, function(){
            $('#b'+ptrn[i]+'c').fadeIn(speed);
            $(this).fadeIn(speed, function(){
                if(i+1<ptrn.length)
                    showLevel(++i,speed);
            });
        });
    });
    if( (i+1) == ptrn.length)
        setTimeout( bindKeys(1), ptrn.length*speed+15) //after the pattern is revealed bind the clicker
}

function bindKeys(i)
{
    for(var i=1;i<4;i++)
        bind(i);
}

function bind(i)
{
    $('#ball_'+i).on('click', function() {      
        $('#b'+i+'c').fadeOut(speed, function() {
            $('#ball_'+i).fadeOut(speed, function() {
                    $('#ball_'+i).fadeIn(speed);
                $('#b'+i+'c').fadeIn(speed);
                if(referee(i))
                    unbind();
            });
        });
    });
}

function referee(val)
{   
    if(pos < ptrn.length){
        ( val === ptrn[pos] ) ? $('#mg-score').text(parseInt($('#mg-score').text())+1) : end();
    }
    if(++pos == ptrn.length)
    {
        ++lvl;
        speed-=40;      
        return true;
    }
}

   function unbind()
    {               
        for(var i=1;i<4;i++)
             $( "#ball_"+i).off();
        startLevel();
    }

function nestedFade(id,i,func)
{
    (!id[i]) ? 0 : $(id[i]).fadeOut('fast',function(){ if(func[i])
{$(id)+func[i];};nestedFade(id,++i,func);}) 
}

function end()
{
    var id = [];
    var func = [];
    for(var i=1;i<4;i++){
    id.push('#b'+i+'c');    
    id.push('#ball_'+i);
    func.push(null)
}

id.push('#mg-contain');
func.push('.fadeOut("slow")');
id.push('#mg-obj');
func.push(".fadeOut('slow')");
id.push('#bg-ball-container');
func.push(".toggle()");

nestedFade(id,0,func);
}

Saves 32% on file size...and if that is the case, is it a fair assumption then that writing less is doing more for the end user?

Answer 1

All a minifier will do is remove white space, which like you said, is ' ' and EOL characters. I believe you may be thinking of file compression tools such as a .zip file with the way your question is worded. Such file types (.zip) will find common strings in your file, and put references to the original string rather than having it written out 10 times. Meaning if the string "I like cake" shows up 4 times in your file, it will have "I like cake" in one location, and the other three locations will reference that first location, shortening the length of the file and therefore decreasing its size.

Well the main reason JS, CSS and HTML get's minified is to decrease the size of the files transmitted from server to client when a client requests a webpage. This decrease in size will allow for a faster load time. So technically writing less is more for a webpages load time, but realistically the effect of you as a developer consciously writing shorter code to minimize file size will either a.) Be to minimal a change to actually make a difference or b.) lead to loss of functionality or bugs due to the focus being on cutting down code length, not code quality.

Answer 2

The same way you can 'minify' a file to reduce its size, you can also 'uglify' a file, which takes your code and shortens things like variable names to the same end: reduce file size by reducing the number of characters in it (not just removing line breaks and space characters).

While it will reduce loadtime for a user, it's not a great practice to write minified/uglified-style code off the bat. That's why in almost any professional build/deploy process, you take your clear, descriptive code and then run your build processes to reduce the size of your files and eventually deploy versions that your end user will have a quicker time loading. You can always write your regular code, then run a compression process like the one you described, save it into a "public" folder and upload that for users to have access to, rather than your fleshed out code.