Matts recent mail on wro4j got me thinking. http://code.google.com/p/wro4j/
So we can easily just reuse wro4j as a separate filter to let us group
CSS and JS files together for minimising and turning into a single
browser request to boost page load times and increasing modularity of
I wondered if we could do a little better though. A few background motivations:
* sometimes layouts declare a dependency on some css/JS and sometimes
its a snippet/template/dynamic include etc.
e.g. its quite common to have global CSS/JS for a site, then custom
pages add a few extra bits and bobs which you want to replace with a
single group file. So the set of includes could be dynamic at runtime;
but we still may wish to have a single cached, static file with those
* maintaining the separate groups file seems a separate level of
indirection that makes it harder to just hack up templates and
refactor them into layouts / includes / snippets etc.
* I prefer hacking jade + scala to XML :)
* in development we often want to use the actual individual includes
as its then easier to use line numbers and see which files need
changing in the developer console in Safari/Chrome/FireBug etc.
So rather than doing this...
then doing this... in a jade layout
link(rel="stylesheet" type="text/css" href="/wro/g2.css")
we could instead just leave the actual includes in the templates using
the real names; then dynamically render them either as separate files
or a single group file.
e.g. anywhere in a template, snippet or layout we could include code
like this (allowing multiple arguments)...
then in the template
then the includeCssAndJs function can firstly get rid of any duplicate
link/script tags (using the URIs of the sources as the unique key),
but it can also either use the actual separate link/script tags if in
development mode or replace the current set of includes with some
'group' link/script and generate the wro4j group on the fly without
having to maintain a separate XML file.
e.g. depending on the development mode (and/or flag in the Scalate
Console) we could render the above as
<link href="/static/css/2.css" rel="stylesheet" type="text/css"></link>
<link href="/static/css/3.css" rel="stylesheet" type="text/css"></link>
or the 'minimised' version
<link href="/groups/g1.css" rel="stylesheet" type="text/css"></link>
where it could just auto-generate numbered groups; or we could provide
a little mapping of lists of URIs => group names.
All we'd need is a few new helper scala functions to declare new
link/script tags (with helper methods for CSS and JS the common
flavours of those) and a includeCssAndJs method to render them in the
Twitter: jstrachan, fusenews
Open Source Integration and Messaging