Optimizing JavaScript Compression

The power of JavaScript libraries are increasing everyday, and many more (free) tools are available now than ever before. There are so many easy to use JavaScript addons, that an unwary developer can quickly degrade the performance of their site. To decrease the performance hit when adding additional JavaScript to a site, many developers use compression tools, such as YUI Compressor. At the very least, a compressor remove all white-spaces from your code, but a good one will also obfuscate variable names into shorter ones, which can help to reduce the size of your code even more. Today well cover some techniques that can help to optimize compression.

Use fewer var

The var keyword is used to bind a variable to a function context (or window, if not inside a function) and is not compressible. However, one var can be used to instantiate many variables. For example:

// this is the standard way of defining several variables
var test1 = 1;
var test2 = {};
var test3 = function() {
	// function code
};

// this will compress better
var test1 = 1,
	test2 = {},
	test3 = function() {
		// function code
	};

Although, some compressors are attempting to remove unneeded vars, it is simple to just do it yourself. At least 4 bytes can saved per var that is removed.

Use Local Pointers For Large Namespaces

You will see this technique throughout the YUI Library, and in much of the code that I write using YUI. When a large namespace, object, or function (more than 4 characters) is used more than twice inside inside a function context, create a local variable, such as setting "YAHOO.util.Event" to YE ("var YE = YAHOO.util.Event"). This makes the local code easier to read, as well as allowing the compression obfuscator to rename those local variables to a single character (saving 15 bytes each time the local pointer is used).

// uncompressable way to use YAHOO.util.Event
(function() {
	YAHOO.util.Event.on(elem1, click function() {/* function code */});
	YAHOO.util.Event.on(elem2, click function() {/* function code */});
	YAHOO.util.Event.on(elem3, click function() {/* function code */});
}());

// compressable way to use YAHOO.util.Event
(function() {
	var YE = YAHOO.util.Event;
	YE.on(elem1, click function() {/* function code */});
	YE.on(elem2, click function() {/* function code */});
	YE.on(elem3, click function() {/* function code */});
}());

If you are in control of all your JavaScript, you may want to create global shortcuts to namespaces or functions that are used frequently.

Concatenate Files Before Compression

The compressor can only obfuscate global variables within a given file, not across all files. If you use global variables, then the compression will be better after concatenating all the files together. In this way the obfuscator can rename variables to shorter ones across all the JavaScript code.

Use Variable Names to Namespace Instead of Objects

Unfortunately, most obfuscators cannot reduce the names of properties added to an object (this is a really hard problem to solve). For this reason, compression will be better when not storing values in parameters on an object. I am often guilty of this, using objects such as _D to store all DOM pointers and _E to store all event callbacks for function context. In the future I will be prefixing DOM pointers with _dom and event callback functions with _evt. This will make the code more verbose, when uncompressed, but each variable will be compressible to a single character.

// using objects to organize variables
(function() {
	var $ = YAHOO.util.Dom.get;
	var _D = {
		test1: $(test1),
		test2: $(test2)
	};
	var _E = {
		callback1: function() {/* function code */},
		callback2: function() {/* function code */}
	};
}());

// using variable names to orgnaize
(function() {
	var $ = YAHOO.util.Dom.get;
	var _domTest1 = $(test1),
		_domTest2 = $(test2),
		_evtCallback1 = function() {/* function code */},
		_evtCallback2 = function() {/* function code */};
}());

This can be the most tedious optimization, and may go against your coding conventions. Use this technique only if you need compress the JavaScript as small as possible.

Nick Zakas of YUI also recommends the following, Helping The YUI Compressor.