Strategy for JavaScript files on Azure

I am working on a strategy for storing and deploying JavaScript files on Azure (ASP.NET web role) My requirements are:

1. To use minified versions in production
2. Use original versions (i.e. not minified) local versions in development environment (to simplify debugging)
3. Simple build/deployment process (VS2010)
4. Simple update process (my files will change from tim开发者_开发知识库e-to-time)

There is a great discussion here Visual Studio 2010: Publish minified javascript files instead of the original ones however this does not take into account the benefits Azure can offer or working with multiple instances.

I am considering deploying my minified JavaScript files to blob storage and use these in the production version. These will be stored with a large max-age Cache Control for client side caching and filenames will store the version (so I can easily update). I welcome feedback on this strategy.

Thus, in development the rendered HTML would refer to a local script file, i.e.:

<script src="Scripts/myjavascript-0.0.1.js" type="text/javascript"></script>

But in Production the result should use the following to refer to a minified version.

<script src="http://myblob.blob.core.windows.net/Scripts/myjavascript-0.0.1.js" type="text/javascript"></script>

My main question though is how to best to achieve automatic switching of the paths in development and production. Or would a custom handler be the normal route (and if so how would that work – I don’t want each instance to reload from the blob on each request).

Regarding #1 & 2:

I discuss a strategy for this here. The basic idea is to user a helper function to emit the script tag. The function can construct a link to the debug files when in debug mode, and the minified files otherwise (which also makes it easy to test locally with the minified files). The same function can handle adding a version to the path for cache invalidation, etc.

Regarding #3:

Add the minification as an after-build step. I added this to my csproj (which is just an msbuild file), which use yui-compressor:

<Target Name="AfterBuild" Condition="'$(Configuration)' != 'Debug'">
  <!-- remove previous minified files -->
  <Exec Command="del $(ProjectDir)Styles\*-min.css" />
  <Exec Command="del $(ProjectDir)Scripts\*-min.js" />
  <!-- Minify javascript and css, unless we're in Debug -->
  <Exec Command="java -jar $(ProjectDir)..\yuicompressor\build\yuicompressor-2.4.6.jar -o .css$:-min.css --charset utf-8 $(ProjectDir)Styles\*.css" />
  <Exec Command="java -jar $(ProjectDir)..\yuicompressor\build\yuicompressor-2.4.6.jar -o .js$:-min.js --charset utf-8 $(ProjectDir)Scripts\*.js" />
</Target>

This will create minified *-min.js and *-min.css files in ~\Scripts and ~\Styles, respectively.

Warning B/c of a bug in version 2.4.6 of the yui compressor, the above won't work if there is only one .css or .js file in the directory.

Your basic plan sounds good. It will even enable you to make use of the CDN with very little effort (you just need to replace the path to your storage account with the path to the CDN).

I don't think I'd try to over think this too much. As suggested elsewhere a control is a good way to go. Simply have this control look up a web.config setting to get the root directory for your scripts and prepend it to the path of the script (your local version this setting would be empty). In order to make sure that you don't have to mess around changing the config for every deploy, I'd use config transformations so it just happens automatically.

For switching the URL of the script links dynamically when running from Azure, you should put all the script blocks inside a usercontrol and use that usercontrol in all the pages. You should not put the script links directly on the aspx/master pages, instead put then on ascx and use the ascx. This helps keeping common script links in a single file and when you need to make a sitewide change, you just change the ascx. Another approach is to use my httphandler that changes the URL of the scripts from relative to absolute in order to facilitate download of scripts from different domain than the site is running from. You can of course use it to prepend the absolute URL of your Azure site. http://omaralzabir.com/loading_static_content_in_asp_net_pages_from_different_domain_for_faster_parallel_download/

You may want to check out the Windows Azure CDN helpers project. It should do pretty much everything you are asking for. You can set in the config if you want your minified files to automatically be deployed to blob storage or stay on the web roles.

• http://cdnhelpers.codeplex.com/
• http://ntotten.com/2011/06/windows-azure-cdn-helpers/
• http://nuget.org/List/Packages/CdnHelpers.Razor
• http://nuget.org/List/Packages/CdnHelpers.ASPX