October 18, 2009 – 1:43 pm by Dave Elkan
By using a combination of the YUI Compressor and the Revealing Module Pattern you can maximise the effect of minimisation and, as a bonus, improve code readability.
The YUI Compressor renames local variable names and references to a single character. It can do this as it knows these variables cannot be accessed outside their function. On the other hand, it does not rename window level variables or any variable or function reference using dot notation.
Maximising Minification
An unminifiable object.
var anObject = {
property: "value",
doSomething: function() {
alert(this.property);
},
init: function() {
this.doSomething();
}
}Looks like this minified (with whitespace restored).
var anObject = {
property:"value",
doSomething: function() {
alert(this.property)
},
init: function() {
this.doSomething()
}
};Minification ratio (before whitespace restoration): 0.67 (168 to 113 bytes).
This method of defining an object does not minify at all and offers no real benefit in performance, readability or functionality. In fact, seeing as the property and function names do not minify, the coder feels obliged to name properties with the shortest names possible. More on that below.
By utilising the Revealing Module Pattern we can create highly minifiable code.
var anObject = function() {
var property = "value";
function doSomething() {
alert(property);
}
function init() {
doSomething();
}
};Becomes (white space restored):
var anObject = function() {
var a = "value";
function b() {
alert(a)
}
function c() {
b()
}
};Minification ratio (before whitespace restoration): 0.46 (172 to 79 bytes).
That’s a fair bit better!
Variable naming
Historically, to keep file-size down, Javascript variables are named in the smallest possible way limiting readability and clarity. i.e.
var el = document.createElement("strong");Badly named variables such as this make it hard to determine the contents and purpose of the variable.
The following well named example clearly shows that the variable stores a strong element used for a headline.
var strongHeadlineElement = document.createElement("strong");By taking advantage of the way the YUI Compressor works you can utilise the Revealing Module Pattern to make your variable names as long (and readable) as you want. i.e.
var revealingModulePatternExample = function() {
// Make all properties local variables
var
// Define private properties
_descriptivePropertyName = 1,
_anotherDescriptivePropertyName = 2;
// Defined private methods.
function _addAndDisplayDescriptiveProperties() {
var descriptivePropertySum = _descriptivePropertyName + _anotherDescriptivePropertyName;
return descriptivePropertySum;
}
function _execute() {
_addAndDisplayDescriptiveProperties();
}
// Return public accessors
return {
execute: _execute
}
};When minified becomes (whitespace restored):
var revealingModulePatternExample = function() {
var
b = 1,
c = 2;
function d() {
var e = b + c;
return e;
}
function a() {
d()
}
return {
execute: a
}
};EDIT – Changed function construction in last example from
a = function() {};
to
function a() {}
As it saves two bytes (when minified) per function. Sweet!
Posted in Javascript | No Comments »
