On 20/12/2010, at 10:04 PM, Adam Heath wrote:

> Scott Gray wrote:
>> Hi All,
>> 
>> I've just finished a freemarker transform that validates and combines 
>> javascript resources and then renders the script tags, I'm interested to 
>> know if it's something you want in the project.
>> 
>> Features:
>> - Makes sure that each script actually exists before telling the browser 
>> about it, removes any possibility of the browser 404'ing on javascripts.
>> - Automatically combines scripts into a single file to reduce the number of 
>> http requests the browser has to make
>> - Define groupings that control how the scripts are combined, e.g. if you 
>> have some scripts that are used on every page then you can combine them into 
>> their own group to take the most advantage of browser caching.  You simply 
>> use the "#" sign to append a group name to the end of each script path:
>>    <set field="layoutSettings.javaScripts[+0]" 
>> value="/images/jquery/plugins/datetimepicker/jquery-ui-timepicker-addon-0.9.1.min.js#core"
>>  global="true"/>
>>    <set field="layoutSettings.javaScripts[+0]" 
>> value="/images/jquery/ui/js/jquery-ui-1.8.6.custom.min.js#core" 
>> global="true"/>
>> - Use the #solo group name to indicate scripts that shouldn't be combined, 
>> useful if you're using some sort of CDN for your jQuery lib or whatever.
>> - Caches the results so that the processing for each set of resources 
>> happens only once
>> 
>> The idea is to remove the need for a balancing act between lots of smaller 
>> scripts but too many requests or a few large scripts with lots of unused 
>> code.  I figured since it changes something that hasn't changed in years I'd 
>> check before committing.  I could also just commit the transform but not use 
>> it OOTB.
>> 
>> I'm also planning something similar for CSS files but it's a little more 
>> complicated because of the @import statement that can appear in them.
> 
> Be very careful about combining lots of javascript files into one.
> You *must* do proper If-Modified-Since handling, or you will greatly
> increase the bandwidth usage of client browsers.
> 
> Without a proper ETag, and If-Modified-Since handling, the browser
> will download the combined javascript file repeatedly, on each page
> load.  The solution, is a bit convoluted.
> ==
> allETags = []
> greatestLastModified = 0
> for(file in files) {
>  perFileETag = perFileLastModifiedTime + '-' + perFileSize
>  allETags.add(perFileETag)
>  if (perFileLastModifiedTime > greatestLastModified) {
>    greatestLastModified = perFileLastModified
>  }
> }
> etag = allEtags.join(':')
> 
> response.setHeader('ETag', etag)
> response.setLastModifiedTime(greatestLastModified)
> ==
> and...
> 
> in IMS mode, the previous ETag will be given.  Split that on ':',
> iterate each part, comparing the lastModifiedTime and size to the
> current list of files.
> 
> IMS mode is also different in HEAD and GET mode.
> 
> I suppose I should pull out the Binary handler in webslinger, as it
> has support for all of this.
> 

The combined files are written to runtime/tempfiles (tempfiles being a webapp 
mount point) and only regenerated when the cache entry is removed, in 
production you wouldn't set an expireTime so they'd essentially only be 
regenerated if the instance is restarted.  No special handling should be 
necessary, the app or http server would set the headers in the same way it does 
for the static javascript files.

Regards
Scott

Attachment: smime.p7s
Description: S/MIME cryptographic signature

Reply via email to