JavaScript Day 11: Tools Part 2: Minification!

I just like the word “minification”.

Anyway, here’s the deal. in ActionScript, and most other languages that go through some sort of compilation process, you write your code in source files and that human readable text gets distilled down into something else. In AS3, it’s byte code that runs in the Flash Player. In Java, it’s byte code that runs in the Java Virtual Machine. In .net languages it’s also similar, as things run on the CLR. Other forms of C or C++ will compile down into something closer to what the computer itself can understand.

With JavaScript, however, you put your files up on your website and the browser pulls them down and executes them. This means that every line of code, every character you write, comment, whitespace, long variable name, etc. has to be uploaded in full, and downloaded in full by every person who visits your site. This further explains a lot of the terse structure of much of the JavaScript you see.

This, of course, presents a problem. Good code, maintainable, readable code, needs to have some structure and some comments. If you’re writing an API, you need to comment it, ideally in the code, and have something that generates documents from those comments. Other, non-obvious points need to be documented as well. Whitespace is important for readability, as are well named functions and variables. But all of this makes bigger files.

Furthermore, while you might want (should want) your code to be understandable and maintainable by your team, you probably don’t care so much whether the end users of your site are able to read the code, and in fact in many cases, may prefer that it is UNreadable by them.

Computer people being smart guys and gals, someone came up with a solution called minification. The idea is to take your source files and run them through a program that makes them as small as possible, while still retaining the same functionality. You continue to code and upgrade and maintain the original source files, but only the minified versions go out on the web. It’s essentially the same workflow as compiling a release version of an app. You keep the original, uncompiled source, you send out the compiled product, once you are ready to ship.

So what does a minifier do? Well, obviously, it can remove any comments and unnecessary whitespace. It can also replace variable and function names with smaller names. If that’s all they did, you’d see some moderate decreases in size and readability. But some go way beyond that, creating files that you would bet money would not execute, and bear no resemblance to what you wrote.

There are probably multiple tools out there that do this, but here’s one for example: http://jscompress.com/

All you do is paste in your code, hit the button, and save the results. Let’s try it with the source of wirelib.js. I guess you are pretty familiar with what that looks like. At this writing, it’s 217 lines of code. Plenty readable. If I paste it in and hit the compress button with the default “Minify (JSMin)” option, I get this:

[php lang=”JavaScript”]var wirelib=(function(){var canvas,context,width,height,lines=[],cx,cy,cz,fl=250,interval,running;function initWithCanvas(aCanvas){canvas=aCanvas;if(canvas!==undefined){width=canvas.width;height=canvas.height;cx=width/2;cy=height/2;cz=fl*2;context=canvas.getContext(“2d”);}}
function project(p3d){var p2d={},scale=fl/(fl+p3d.z+cz);p2d.x=cx+p3d.x*scale;p2d.y=cy+p3d.y*scale;return p2d;}
function addLine(){var i,numPoints,points,line;points=(typeof arguments[0]===”object”)?arguments[0]:arguments;numPoints=points.length;if(numPoints>=6){line={style:this.strokeStyle,width:this.lineWidth,points:[]};lines.push(line);for(i=0;i35?String.fromCharCode(c+29):c.toString(36))};if(!”.replace(/^/,String)){while(c–){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return’\\w+’};c=1};while(c–){if(k[c]){p=p.replace(new RegExp(‘\\b’+e(c)+’\\b’,’g’),k[c])}}return p}(‘o U=(8(){o t,b,r,E,c=[],C,B,D,J=1w,P,H;8 12(1h){t=1h;F(t!==1v){r=t.r;E=t.E;C=r/2;B=E/2;D=J*2;b=t.1u(“1t”)}}8 I(L){o e={},14=J/(J+L.z+D);e.x=C+L.x*14;e.y=B+L.y*14;16 e}8 m(){o i,K,7,4;7=(1s Y[0]===”1y”)?Y[0]:Y;K=7.g;F(K>=6){4={1d:n.O,r:n.N,7:[]};c.G(4);9(i=0;i