JavaScript minification is a crucial step in modern web development, significantly reducing file sizes and improving page load times. For instance, jQuery 1.11’s file size decreases from 247KB to 97KB after minification. While this might seem negligible on broadband connections, it becomes crucial for users on mobile devices or slower connections. This guide will show you how to automate JavaScript minification during the Team Foundation Server (TFS) build process.

Understanding Minification Options

There are several tools available for JavaScript minification, but Google’s Closure Compiler stands out for its reliability and features. The compiler offers two optimization modes: simple and advanced. While advanced mode provides more aggressive optimization, it requires careful consideration of potential side effects. For this guide, we’ll focus on simple optimization, which provides a good balance of performance and safety.

Prerequisites

Before implementing the minification process, you’ll need to set up a few components:

  1. Google Closure Compiler (downloadable from Google’s developer site)
  2. Java Runtime Environment 7 (required for running the Closure Compiler)
  3. Access to your TFS build server
  4. Appropriate permissions to modify build definitions

Implementation Process

Project Configuration

The first step is to modify your project file to include the minification target. Open your project file (either .vbproj or .csproj) in your preferred text editor. We’ll need to make several modifications:

  1. Add a DefaultTarget to the Project element:
<Project ToolsVersion="4.0" DefaultTargets="Build;AfterCompile;AfterBuild" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
  1. Add a JavaPath property to your PropertyGroup:
<JavaPath />
  1. Add the minification target at the end of the file:
<Target Name="AfterBuild" Condition="$(IsTFSBuild)=='True'">
  <Exec Command="&quot;$(JavaPath)java&quot; -jar jscompiler.jar --js jsMyFile.js --js_output_file $(TargetDir)MyFile.min.js" />
</Target>

Understanding the Minification Process

Let’s look at how the Closure Compiler transforms your code. Here’s a sample JavaScript file:

function unusedFunction(note) {
  alert(note['text']);
}

function displayNoteTitle(note) {
  alert(note['title']);
}
var flowerNote = {};
flowerNote['title'] = "Flowers";
displayNoteTitle(flowerNote);

After simple optimization, it becomes:

function unusedFunction(a){alert(a.text)}function displayNoteTitle(a){alert(a.title)}var flowerNote={};flowerNote.title="Flowers";displayNoteTitle(flowerNote);

And with advanced optimization:

var a={};a.title="Flowers";alert(a.title);

Configuring the Build Definition

To enable minification during the build process:

  1. Open your Build Definition in Visual Studio
  2. Navigate to the Process section
  3. Open “3. Advanced”
  4. Add the following to MSBuild Arguments:
    /p:IsTFSBuild="True" /p:JavaPath="C:\Program Files (x86)\Java\jre7\bin\"

Best Practices and Considerations

When implementing JavaScript minification in your build process, consider these important points:

  • Always test the minified output thoroughly
  • Keep source maps for debugging purposes
  • Consider implementing version stamping for cache busting
  • Document the minification process for your team
  • Monitor build times to ensure the process isn’t causing significant delays

Alternative Approaches

While this guide focuses on the Closure Compiler, there are other options worth considering:

  • Web Essentials 2013: Provides minification during development
  • UglifyJS: A popular alternative to Closure Compiler
  • Bundling and minification in ASP.NET: Built-in solution for .NET projects

Moving Forward

This implementation provides a solid foundation for automated JavaScript minification in your build process. The conditional execution based on IsTFSBuild ensures that minification only occurs during the build process, not during local development.

Remember to:

  • Keep your Closure Compiler updated
  • Monitor the performance impact of minification
  • Consider implementing source maps for debugging
  • Test the minified output across different browsers

Note: Always maintain a backup of your original JavaScript files and test the minified output thoroughly before deploying to production.