Last night, Scott Guthrie announced that the ASP.net team published a free tool that enables you to improve the performance of your Ajax applications by reducing the size of its JavaScript files. The new tool is named the Microsoft Ajax Minifier.
You can read Scott Guthrie’s announcement here:
http://weblogs.asp.net/scottgu/archive/2009/10/15/announcing-microsoft-ajax-library-preview-6-and-the-microsoft-ajax-minifier.aspx
And you can download and install the free tool from the CodePlex website here:
http://aspnet.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=34488
In this blog entry, I explain how you can take advantage of the Microsoft Ajax from the command-line and when you are using Visual Studio.
Overview of the Microsoft Ajax Minifier
The Microsoft Ajax Minifier was created by Ron Logan (who is clearly a super-genius). The Microsoft Ajax team (I work on this team) has been using this tool internally for a number of years. For example, we use the Microsoft Ajax Minifier to minify the Microsoft Ajax Library before publishing it.
The Microsoft Ajax Minifier enables you to reduce the size of a JavaScript file by removing unnecessary content from the JavaScript file. The tool supports two modes: normal crunching and hypercrunching.
When you use normal crunching, the Microsoft Ajax Minifier strips all comments, unnecessary whitespace, curly-braces, and semicolons from a JavaScript file. Surprisingly, just removing all of this unnecessary code fluff can make a significant difference to the size of a JavaScript file.
When you use hypercrunching, the Microsoft Ajax Minifer gets more aggressive about reducing the size of a JavaScript file. In hpercrunching mode, the Microsoft Ajax Minifier shortens the names of local variables (variables in functions but not global variables) and it removes unreachable code.
For example, here’s an unminified JavaScript file:
// Adds two numbers
function addNumbers(firstNumber, secondNumber, thirdNumber)
{
var result = firstNumber + secondNumber + thirdNumber;
return result;
}
// Calculate cost
var cost = addNumbers(1, 2, 3);
And here is the same JavaScript file after it has been hypercrunched using the Microsoft Ajax Minifier:
function addNumbers(b,a,c){var d=b+a+c;return d}var cost=addNumbers(1,2,3)
It is important not to confuse minifying with compressing. Both approaches to reducing the size of a JavaScript file are important. You can configure IIS to compress JavaScript files using GZIP compression automatically. You get additional performance benefits from minifying JavaScript files before compressing them.
Using the Microsoft Ajax Minifier from the Command-Line
When you install the Microsoft Ajax Minifier, you get a convenient Microsoft Ajax Minifier Command Prompt that you can invoke from Start, Microsoft Ajax Minifier program group.
This command prompt adds the Microsoft Ajax Minifier to the path variable so that you can change directories and still run the Microsoft Ajax Minifier.
Use the following command to perform normal crunching:
ajaxmin inputfile.js –o outputfile.js
Use the following command to perform hypercrunching:
ajaxmin –hc inputfile.js –o outputfile.js
The Microsoft Ajax Minifier has a number of different switches that you can use to control how a file gets minified. These options are documented in the Microsoft Ajax Minifier documentation included in the Microsoft Ajax Minifier program group.
Using the Microsoft Ajax Minifier as a Visual Studio Build Task
You also can integrate the Microsoft Ajax Minifier directly into the Visual Studio build process. In that case, every time you perform a build, you can minifying all of the JavaScript files in your project automatically.
When you install the Microsoft Ajax Minifier, a new MSBuild task named ajaxmin is added to the following folder:
Program Files\MSBuild\Microsoft\MicrosoftAjax
In order to use this custom build task in a Visual Studio Project, you need to modify the project file. You can modify a project file by opening the project file in Notepad. Just open Notepad and browse to your project folder and open the projectname.csproj or projectname.vbproj file.
Alternatively, you can modify your project file directly within Visual Studio by right-clicking your project name in the Solution Explorer window and selecting the menu option Unload Project. Next, you need to select the menu option Edit Project Name (see the following screenshots).
I admit that, even though I work on the ASP.NET team, I had never noticed the Unload Project, or Edit Project Name menus before. A good day is a day when you can discover a super obscure Visual Studio menu item!
After you open your project file using Notepad or Visual Studio, you need to add the following section anywhere within the project file (within the opening and closing <project> elements):
<Import Project="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\ajaxmin.tasks" />
<Target Name="AfterBuild">
<ItemGroup>
<JS Include="**\*.js" Exclude="**\*.min.js;Scripts\*.js" />
</ItemGroup>
<AjaxMin SourceFiles="@(JS)" SourceExtensionPattern="\.js$" TargetExtension=".min.js" />
</Target>
This section imports the AjaxMin task. It causes the task to be executed after a build. The <ItemGroup> element is used to specify the set of files to minify. In this case, all files ending in the extension .js, but not files ending in the extension .min.js are selected for minification. All the files from the Scripts folder are also excluded (So jQuery and MicrosoftAjax won’t get re-minified). Finally, the files are actually minified by invoking the task with the <AjaxMin> element.
After you make these changes, you can reload your Visual Studio project by right-clicking your project in the Solution Explorer window and selecting the Reload Project menu option.
Because we added a custom task to our project -- and a custom task could do evil things like delete your entire hard drive -- you get the following warning dialog:
Select Load project normally and your project will appear in the Solution Explorer window again.
Now here is the fun part. Now, that we have added the Microsoft Ajax Minifier task to our project file, every JavaScript file will get minified every time we perform a build. Just select the Build, Build Solution or Build, Build Project to perform the minification (or hit F5).
Be aware that minified files are not added to a project automatically after a build. After performing a build, select the menu option Project, Show All Files to see the new minified files.
Conclusion
The Microsoft Ajax Minifier makes it much easier to build high-performance Ajax applications. By reducing the size of your JavaScript files, you can enable the visitors to your website to download your Ajax applications much faster.