Tiny, fast javascript with Google Closure-Compiler


I’ve just spent a few hours trying to clean up the javascript on a project that’s about to launch, and I’m really impressed with Google’s Closure-compiler, it’s available online, as a Rest API or as a java app. I’ve been running it on my machine, with a shell script to batch the compilation of .js files.

It not a ‘real’ compiler, it doesn’t produce machine code, but it not only shortens your code, such as variable names etc, it also optimises it, to make it more efficient.

1
2
3
4
5
6
//before closure compiler
var settings = { maxZoom: 6, gridSize: 65, styles: clusterStyles };
if( !!markerClusterer ) markerClusterer = null;
markerClusterer = new MarkerClusterer( map, markers, settings );
// after
j&&(j=null);j=new MarkerClusterer(map, markers, { maxZoom: 6, gridSize: 65, styles: clusterStyles } );


It also works out that the clusterStyles object is only ever used once (in the constructor of MarkerClusterer) so it moves the object itself to be inline in the constructor call. It’s all very clever, and hasn’t broken a single bit of .js (yet!).

my jscompile.sh looks like so:

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
#############################################################
# JAVSCRIPT COMPILE SHELL SCRIPT							#
# Written by Gabriel Bucknall (gabriel@pixelbreaker.com)	#
#############################################################
# optimisation="ADVANCED_OPTIMIZATIONS" # USE WITH CAUTION
# optimisation="SIMPLE_OPTIMIZATIONS"
 
compile_js_one()
{
	inputpath="../deploy/public/_includes/js/"
	outputfile="../deploy/public/_includes/js-compiled/all.js"
	files=( "constants.js" "sitemap.js" "sitedata.js" "siteintro.js" "siteform.js" "sitegallery.js" "deeplinking.js" "sidebar.js" "init.js" )
	filesin=""
 
	echo "--------------------------------------------------------------------------------------------"
	echo "compiling files in "$inputpath" to "$outputfile
	echo "--------------------------------------------------------------------------------------------"
	for i in "${files[@]}"
	do
		filesin=$filesin"--js="$inputpath$i" "
		echo "compiling "$i
	done
 
	java -jar compiler.jar $filesin--js_output_file=$outputfile --compilation_level SIMPLE_OPTIMIZATIONS #--externs ../deploy/public/_includes/js/externs/externs.js --externs ../deploy/public/_includes/js/externs/jquery-externs.js --externs ../deploy/public/_includes/js/externs/googlemaps.js
	echo "compiling complete."
}
 
compile_libs_one()
{
	inputpath="../deploy/public/_includes/js/library/"
	outputfile="../deploy/public/_includes/js-compiled/libs.js"
	files=( "jquery.address-1.4.js" "jquery.easing.1.3.js" "jquery.jcarousel.min.js" "jquery.jscrollpane.min.js" "jquery.mousewheel.js" "jquery.simplemodal.js" "jquery.uploadify.v2.1.4.min.js" "markerclusterer.js" "modernizr-1.7.min.js" )
	filesin=""
 
	echo "--------------------------------------------------------------------------------------------"
	echo "compiling files in "$inputpath" to "$outputfile
	echo "--------------------------------------------------------------------------------------------"
	for i in "${files[@]}"
	do
		filesin=$filesin"--js="$inputpath$i" "
		echo "compiling "$i
	done
 
	java -jar compiler.jar $filesin--js_output_file=$outputfile --compilation_level SIMPLE_OPTIMIZATIONS
	echo "compiling complete."
}
 
case $1 in
	JS) 
		compile_js_one
		;;
 
	JS_LIBS) 
		compile_libs_one
		;;
 
	ALL)
		compile_libs_one
		compile_js_one
		;;
 
	--help)
		echo "Use one of the following options"
		echo "JS		Compile the JS group of files"
		echo "JS_LIBS		Compile the JS_LIBS group of files"
		echo "ALL		Compile all file groups"
		;;
 
	*)
		echo "add --help parameter for help."
		;;
esac
exit

This takes all the specified files and compresses the hell out of them, then outputs them to one file (for each group I’ve set up). Some libraries wont compile though, such as shadowbox, as it’s already been compiled via Yahoo’s YUI system, and seems to break after closure compiler has tried to rebuild it. I then serve them to the client via Minify to make sure they’re even smaller, and gzipped where applicable.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">