Get Loom

Javascript / CSS resource bundles

The development of any web application often includes a big amount of third-party javascript and CSS files. You should concatenate, minify and gzip these files to reduce the number of HTTP requests, but this involves some maintenance effort even when included in your build script.

Loom defines the concept of WebResourceBundle, which is configured in your spring config file:

<loom:config>
	<loom:web-resources>
	   <loom:web-resource name="css">
		/css/yui/reset.css 
		/css/styles.css
	   </loom:web-resource>
	   <loom:web-resource name="ie">
		/css/iehacks.css 
	   </loom:web-resource>
	   <loom:web-resource name="myapp">
		classpath:js/prototype/prototype.js 
		/js/myfile.js
	   </loom:web-resource>
	</loom:web-resources>
</loom:config>

Minify, concatenate and gzip

If YUICompressor or JSMin is found in the classpath (both jars can be found with the loom distribution) the result will be minified.

In any case (development mode or not) the files will be gzipped and cached aggresively based on their MD5 checksum. This means that, even in development mode, the browser will not ask for javascript files that did not change. This also applies to images referenced from CSS files.

The files will be gzipped if the browser supports the gzip encoding. Any processing (concatenation, minification and/or gzipping) will be done just once and stored in a temporary folder for further reuse.

Resource locations may be expressed relative to the classpath or the server path, using ant-style wildcards (like classpath:/js/**/*.js) to specify sets of resources.

Example of use

Each bundle may then be used with your JSP files:

<l:css resource="css"/>
<l:css resource="ie" ie="any"/>
<l:script resource="myapp"/>

The generated html with config.development=true:

<link href="/myapp/resources/css/2008a6c2ba1c6009f5f84db99e6a76e0/0/reset.css" rel="stylesheet" type="text/css"></link>
<link href="/myapp/resources/css/f6c4b21a2f6c9d265d14081243c2da40/1/styles.css" rel="stylesheet" type="text/css"></link>

<!--[if IE]>
<link href="/myapp/resources/ie/658801c193faa8e7173e2cd220093e67/0/iehacks.css" rel="stylesheet" type="text/css"></link>
<![endif]-->

<script src="/myapp/resources/myapp/b5684120e496c310977713be34be4868/0/prototype.js" type="text/javascript"></script>
<script src="/myapp/resources/myapp/07139c2fd5d77ee9fa619ff335996068/1/myfile.js" type="text/javascript"></script>

The generated html with config.development=false:

<link href="/myapp/resources/css/7c66dcfb53bb87201e74aef4f1211a63/all/" rel="stylesheet" type="text/css"></link>

<!--[if IE]>
<link href="/myapp/resources/ie/da188973e7712595d03da0bbbfa059f4/all/" rel="stylesheet" type="text/css"></link>
<![endif]-->

<script src="/myapp/resources/myapp/1c004c851402d83a84e3d7a2fb73a375/all/" type="text/javascript"></script>