Caching and crunching your JS Files on Office Live

Office Live has a handler that does both caching and crunching/compression of javascript JS files hosted on our servers. But caching JS files can prevent developers from seeing their changes real-time while they are updating code. And crunching can make debugging script more difficult to read too.

So we’ve developed a few techniques to deal with our JS file caching and crunching and want to share them with you.

Circumvent JS file caching

The easy way to avoid caching of your JS files is to rename the file extension to something different, for example JSN or JSX.

But if you are using a nice JavaScript editor like SharePoint Designer, you want to keep the advantages of intellisense, auto-complete and code coloring, so that means you need to keep the JS extension. One way to have your cake and eat it too is to dynamically change a querystring parameter being passed to the JS file each time the file is requested. This will make your JS file request unique, so you will always get a new copy of the file.

Here is a code snippet that does just that. It has a function that appends a timestamp as the value for the querystring parameter “version”. Add the includeJS() function to your page, and every time you reference a JS file, just pass in the JS file name and path to the function.

<script type="text/javascript" language="javascript">

<!--

function includeJS(src)

{

document.write("<script type=\"text/javascript\" language=\"javascript\" src=\"" + src +

" version=" + new Date().getTime() + "\"></script>");

}

-->

</script>

<script type="text/javascript" language="javascript">

includeJS("js/stuff.js");

includeJS("js/goo.js");

</script>

Circumvent javascript crunching

If you are trying to pop your script into a script debugger, and are finding the code hard to read due to the javascript compression that removes all of the tabs, spacing and so forth, the simplest solution is to just change the file extension of your JS file to something else like JSN or JSX. Then just change the reference in your HTM or ASPX page to refer to the new file name.

Enable caching when done & other recommendations

When you are satisfied with the changes that you have made to your script, you should definitely take advantage of the caching and crunching by changing your file extension back to JS and/or remove any code you may have used to dynamically change the querystring parameters. Your customers will be happy you did.

Also, we encourage you to version your JS files so that you can keep track of where you are with that file. This will also help ensure that the other caches out there (proxies, browser) do not hang on to old copies of your JS files when you have a new version. Something as simple as foo_1.js... foo_n.js should do the trick.




Answer this question

Caching and crunching your JS Files on Office Live

  • DarrenARBell

    We've talked about doing that, but it would probably take the form of a querystring parameter to the JS file, so it might look something like: "file.js cache=off". But the script solution provided in this sample is also a querystring parameter, so there's not much difference from a developer perspective. So we postponed putting in a caching switch since there's already a similar work-around.



  • Lee Brimelow

    Although it can solve cache issue, but it is pain. Could OL make a link/function allow user send command to clean the cache It seems not too difficult. I may be wrong.

  • Caching and crunching your JS Files on Office Live