There are some really good systems out there for optimising javascript & CSS, but we thought we’d start simple and see how it went. We’ve now rolled this system out over four applications and its working great.
To avoid source code merges, small and frequent check-ins are good, so using a source control system like Accurev where each developer has their own workspace is perfect. Its also easier to maintain code and avoid merges if you can have one javascript class per file – but you end up with lots more files, which can make loading a page slower.
To solve this, we create as many javascript and CSS files as we need, then merge them on the fly. This allows a single url /scripts?version=x to download all required scripts and an XML file manages which scripts will be merged and returned. We also threw the Yahoo YUI library in there to minimize the javascript and CSS and reduce the overall size.
The other issue we were having was with debug code, swapping between debug and production libraries and remembering to remove console.log commands. To solve this our XML file specifies a target, so the web.config can control which javascript files will get included. We also use some REs to strip out debug commands on the fly.
Overall, a dead simple solution to solve 5 problems:
1. More files means easier to maintain and fewer source control merges
2. On-the-fly merging means only one javascript & one CSS per page, resulting in faster page loads
3. Minifying the code means smaller javascript and CSS
4. Stripping out console.log and other debug code means we can leave it in and not worry about it in production
5. Swapping between debug and production versions of libraries is automatic
We can highly recommend the YUI compressor for .NET – which we use in this code snippit:
public string GetJavascript()
{
try
{
// Get the files from the XML index
List<string> scriptFiles = GetJavascriptFiles();
// Load the contents and put into a string
var javascript = MergeFiles(scriptFiles);
// Optimise
if (_Target.ToLower() == "live")
{
// Strip out console.log, etc
javascript = RemoveDebugCode(javascript);
// Minimise using Yahoo YUI
javascript = JavaScriptCompressor.Compress(javascript);
}
// return the result
return javascript;
}
catch (Exception e)
{
return e.Message;
}
}
