Web applications often include 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 and improve performance, but this involves some maintenance effort even when included in your build script.
Loom defines the concept of WebResourceBundle, which defines a set of javascript or CSS files that will be used separately while in development and concatenated, minified and gzipped when deployed into the production environment.
There are two ways to define web resource bundles:
Bundles defined at runtime
Starting with Loom 2.2, this is the recommended way of defining bundles. Just define your required dependencies in the javascript or CSS file that is included from your JSP file.
JSP file:
style.css:
main.js:
Bundles defined in your spring file
Bundles can also be configured in your spring config file:
This is still supported but no longer recommended, since:
- It takes longer to start the application
- You cannot add/remove resources from the bundle without a server restart
- It is harder to keep track of your dependencies
Minify, concatenate and gzip
If Google Closure Compiler or YUICompressor 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 or in memory for further reuse.
Resource locations may be expressed from the classpath or relative to the current resource.
Resources referenced from CSS files
Resources referenced from css files will be reallocated to use MD5-based names. To circumvent this, use absolute location names (start with '/').
Example of use
The generated html with config.development=true:
The generated html with config.development=false: