Autoversioning JS and CSS files using ColdFusion

Before going through the technique of auto-Versioning JS/CSS files, lets first understand,

What is versioning and Why versioning is required?

When we update javaScript or css files that are already cached in user’s browsers, most likely many users won’t get that for some time because of the caching at the browser or intermediate proxy(s). So we need some way to force the browser/proxy to download the latest files. So to do this either we need to change file names or URL of the files each time we change the file. As changing the file names each time after modification is not possible, so we can add a version number to the JS/CSS files to get the latest copy from the server. This technique is called as versioning.

Ex: <script type="text/javascript" src='js/global.js?v=1.2'></script>

Problem With this Approach:

The above mentioned technique works fine when we have less number of js/css files in our project. Soon it becomes very cumbersome to maintain when the project gradually becomes larger and involves a lot of js/css files for different modules.
As each time we modify some js/css files we need to update the version number in all the files where these files are included. To overcome from this problem normally 2 approaches are used by developers are:

  • 1st Approach:
    Declare a global constant called VERSION, and use this CONSTANT with all the js/css files.So with each new release we can change the verisonnumber. Ex:

    <cfset version = 1.1>
    <cfoutput>
         <script type="text/javascript" src="a.js?v=#version#"></script>
    </cfoutput>

    The problem with this approach is,
    Let’s say we are having 20-30 js/css files are used in our project, Suppose for the current release we have modified only 2/3 js files. Now we need to change the global version number.So by changing the global version number it will force all the js/css files to be reloaded again but will not use the cache. This creates very bad user experience for sites having huge traffic.

  • 2nd Approach:
    One better solution is to append the file last modified date time as the version number so that each time we modify a file, the user will get the latest copy of the file.This is called as auto versioning.

     Ex:<cfset  lstModified = getfileInfo("c:\test_prj\js\global.js").lastmodified >
     <cfoutput>
          <script type="text/javascript" src="a.js?v=#lstModified #"></script>
     </cfoutput>

It looks like a better solution, still there are some issues with this approach.
As per Google Caching Best Practices , It says not to use a query string with static file names,because it does not use cache for those files.

Don’t include a query string in the URL for static resources. Most proxies, most notably Squid up through version 3.0, do not cache resources with a “?” in their URL. To enable proxy caching for these resources, remove query strings from references to static resources, and instead encode the parameters into the file names themselves.

So what is the best solution?

So the best solution to auto version js/css/image files involves two steps.

  1. Append the last modified date time with the file name itself .
  2. Set up redirect rule on the server. The redirect rule is to redirect any files located in our \scripts\ or \css\ folders with version numbers in between the file name and the extension back to just the filename and extension. For example, I could now rewrite the url “/css/structure.css: as “/css/structure.1234.css” and Apache/IIS would see those as the exact same files. This approach is used by most of the high traffic sites like Amazon, Google etc.

So now in this way each time we modify some js/css/image file, we just do not need to change anything else on the production server, It will automatically refresh only those files that are modified and even cache the files as there is no query string appended to the file names.

AutoVersioning files using ColdFusion:
It involves two steps,

Step1:
First we need to add these redirect rules.

For IIS: 
Add this to the web.config:
 <rewrite>
            <rules>
                <rule name="caching">
                    <match url="^(.*)([0-9]{10}\.)(css|js)$" />
                    <action type="Rewrite" url="{R:1}{R:3}" />
                </rule>
            </rules>
        </rewrite>
For Apache:
Add this to .htaccess:
RewriteRule ^(scripts|css)/(.+)\.(.+)\.(js|css)$ $1/$2.$4 [L]

Step2:

<cffunction name="autoVersion" access="public" output="true" returntype="string" >
    <cfargument name="fileName" type="string" required="true" >
    
    <cfset var absPath = expandPath("#ARGUMENTS.fileName#")>
    <cfif !fileExists(absPath)>
        <cfreturn fileName>
    </cfif>    
    
    <!--- get the last modified datetime of the file --->
    <cfset  lstModified = getfileInfo(absPath).lastmodified >
    
    <!--- get the unix timestamp --->    
    <cfset  mtime =  dateDiff("s", "January 1 1970 00:00", lstModified)>
    <cfset var fileNameWithTimestamp = listFirst(ARGUMENTS.fileName, '.') & '.' & mtime & '.' & listLast(ARGUMENTS.fileName, '.')>
    <cfreturn fileNameWithTimestamp>
    
</cffunction>    

<cfoutput>
    <html>
        <head>
            <link rel="stylesheet" href="#autoVersion('css/myStyle.css')#" />
        </head>
        <body>
            
        </body>
    </html>
</cfoutput>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s