Improving Javascript Minification by Using Closure

Update
While you can improve minification by following below description, you might experience a negative performance impact, especially if you have a lot private functions since all these functions are hold within the closure of the anonymous function. I’m not sure how bad that really is, but I for myself went back to build an object directly, not using the closure of the anonymous function.

Like jQuery, I’m using the Google Closure Compiler to minify the code of my Image Color Picker plugin.

When I looked over the minified code, I noticed that quite a few function names don’t get minified.
Let’s take a closer look at the v0.1 version of ImageColorPicker.js (github):

$.widget("ui.ImageColorPicker", {
 options: {},
  _create: function() {
  },
 
  destroy: function() {
  },
 
  selectedColor: function() {
  },
 
  _d2h: function(d) {
  },
 
  _h2d: function(h) {
  },
 
  _createImageColorPicker: function() {
  }
});

option, _create, destroy, selectedColor and all the other function names don’t get minified. Everything within these function gets minified pretty well. The reason for this is that the Closure Compiler regards all these functions and objects as public. Since they are public the compiler does not know whether another, external library uses one or more of the functions. In order not to break external libraries or, more generally, code that depends on our code, the Closure compiler does not touch the names.

In case you have quite a few “private” functions and / or use them heavily, it can become pretty space wasting to not minify them. So how to fix this?

The solution is: Use a Javascript Closure. By using closures you can make functions truly private, compared to marking them private by using the underscore convention. This is ImageColorPicker.js after the refactoring (github):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

var uiImageColorPicker = function(){
 
	var _d2h = function(d) {
	};
 
	var _h2d = function(h) {
	};
 
	var _createImageColorPicker = function(widget) {
	};
 
 
 
	return {
		options: {},
 
		_create: function() {
		},
 
		destroy: function() {
		},
 
		selectedColor: function() {
		}
 
	};	
}();
$.widget("ui.ImageColorPicker", uiImageColorPicker);

In line 1 a function is assigned to uiImageColorPicker. But not really. Take a closer look at line 27. It’s directly executed. Therefore the value which is assigned to uiImageColorPicker is not a function, but the object which is returned by the function. This object is supposed to contain all public functions of your plugin and option, _create and destroy, since these are expected by the jQuery UI Widget implementation.
All private functions go to the function body, outside of the object. After the outer function ran, they won’t be accessible any more, but if you use them in functions of the returned object they are bound through a closure and thus can be used by the object’s functions even after the outer function finished execution.

When doing such thing, there are two things I can think of which require a little extra attention:

• Don’t store object specific data in the function body. That’s like storing data in an object prototype. All objects would either read the same data, or worse, overwrite data. Therefore, keep object related data in the object.
• this refers to the object when used within the object and to the function when used outside of the object in the function body. If you need to use the object’s this reference in your private function, pass it in as a parameter. I’m doing this for example in the create function. Check out github for the code.

A bonus: In case you ever forget to remove a private function which you don’t use anymore it will be removed entirely by the Closure Compiler in the minified version of your plugin ;-)

Measuring the result

After refactoring the code, I ran the Closure Compiler again. Before the minified version of the plugin had 3729 bytes. After the refactoring it had 3475 bytes. That’s about 8% smaller. Hm, not quite a lot you’d say. But:

• ImageColorPicker is a very small plugin anyway. If your plugin has a lot more private functions and / or uses them more frequently the savings will increase.
• If you have thousands of hits per day, each percent you save in download size will save yourself or your company cash money.