"Minifying" JavaScript

JavaScript has the dubious quality of not being compiled. The source code text for the program is downloaded by the client, parsed, and the interpreted by the browser. Verbose, easy-to-maintain coding styles actually hurts performance with JavaScript, as it Greatly Increases The Page Weight transmitted to the client.

There have been a number of utilities out there for “minifying” JavaScript.

 

·         The first level of minification is to Remove Whitespace And Comments. This is a minimum amount to be expected for a website – comments and whitespace can be extracted from the sources without changing the semantics of the code. The third-party tool Jsmin from Douglas Crockford (http://www.crockford.com/javascript/jsmin.html) is an excellent example of this kind of minification.

·         The second level of minification is to also Remove Excessive Semicolons And Curly-Braces. In JavaScript, semicolons are not statement terminators as in C or C#, they are separators. Therefore the final statement in a block does not require a semicolon after it. Curly braces, although highly-recommended for properly-maintained JavaScript code, also don’t need to be around single-statement blocks. We don’t have to send those bytes to the user, however, and they can and should be removed before deployment. Developers also tend to over-parenthesize their expressions in order to make them more readable or to ensure that the intended precedence will unfold as expected. Extra parentheses can also be removed from the output. The danger is that this level of minification could alter the semantics of the code if not done properly.

·         The next level of minification is to recognize the fact that Local Variables And Functions are referenced only within a known scope, and can therefore have their identifiers Shrunk Down To Shorter Names. This is highly useful because developers can code with longer, semantic names in their local functions and variables in order to increase readability and maintainability without having to penalize the client with large downloads. These modifications must be very carefully made because this level of change to the sources is greatly increased. Scope chains must be respected or the code will cease to work properly, and global variables cannot be touched (since they may be referenced from other script files).

·         The next level is to analyze the code and recognize & Eliminate Unreachable Statements And Functions, And Unused Variables. Eliminating these bytes from the download can go a long way to shrinking your page weight, without having to require constant manual reviews of the code base. Again, this must be very carefully done to ensure that a function or variable really isn’t referenced.

·         The next level of minification is to Analyze The Usage Of Global Variables And Object Properties, and to Provide Shortcuts in the code the replace the longer, repeatedly used constructs. For example, if the algorithm detects that a script repeated accesses the “window” global object, a one-letter variable can be set to the window object, and every other instance of “window” in the code can be replaced with that single letter. This not only modifies the existing sources, but also injects new code into the JavaScript. What can be replaced must also be carefully determined to make sure that the values and objects cached in the short local variables will remain the same value for the life of the variable.

 

Hope this helps.

Arun…