The days of a user sitting and waiting while a web page loads are long gone. For this reason, any and all ways to improve site performance are embraced by developers. Microsoft’s Ajax Minifier improves website performance by reducing the amount of data downloaded to a client.

Only what is necessary

The approach of the Microsoft Ajax Minifier tool is to remove all unnecessary whitespace and characters. It works with JavaScript and CSS files. The source files are used as input with the minified versions as the output. However, you cannot mix the two file types; that is, you can use JavaScript or CSS as the input file type but not a mixture.

Getting it

Microsoft Ajax Minifier is freely available for download and installation from its CodePlex site. The current version is 4.38. The download is one MSI file, which results in four files installed on the target machine:

  • AjaxMin.dll — Application dll that can be used in your code.
  • AjaxMin.exe — The command line tool used to process source files.
  • AjaxMinCommandPrompt.bat
  • AjaxMinCommandPromptVars.bat

In addition, the files necessary for integration with Visual Studio or other tools are included in a separate directory (c:\program files\MSBuild\Microsoft\MicrosoftAjax is the default). This directory includes the files (AdjaxMin.dll, AjaxMinTask.dll, and AjaxMin.tasks) necessary for integration.

Once the tool is installed, you can easily process JavaScript and CSS files via the command line or incorporate in Visual Studio or your build process.

Minimizing your code

The Microsoft Ajax Minifier command line is available via the Programs menu (Programs | Microsoft Ajax Minifier | Microsoft Ajax Minifier Command Prompt). Command line switches are used to control what features are used, as well as the input and output files. A comprehensive list of command line switches is beyond this article, though here are a few examples:

  • analyze — analyzes the source file(s) and displays results.
  • clobber — signals (true/false) whether output file will be overwritten. The default is false.
  • pretty:N — makes the output files to have code on multiple lines with N spaces per tab. This is off by default.
  • comments:none|important — signals whether all comments are removed or just preserves important comments, which is the default.
  • out — is the name of the output file.

You can get a complete list of command-line options with the question mark switch (AjaxMin.exe /?).

Let’s take a closer look at using the command line. The following simple JavaScript is used as the source file:

// Function description
function exampleFunction(var1, var2, var3)

{


var concat = var1 + ' ' + var2 + ' ' + var3;


return concat;


}


// Call it

var result = exampleFunction('One', 'Two', 'Three');

The following command-line command is used to process this source code:

AjaxMin.exe test.js -analyze -out out.js

Since the analyze option was used, here is the result of issuing this command:

Microsoft Ajax Minifier (version 4.38.4352.23849)
JavaScript and CSS minification and verification command-line utility

Copyright 2011 Microsoft Corporation

Minifying file 'test1.js'...
Global Objects

result [global var]

exampleFunction [global function]
Function exampleFunction - starts at line 3, col 0

var1 [argument] [1 references renamed to n]


var2 [argument] [1 references renamed to t]


var3 [argument] [1 references renamed to i]

concat [local var] [1 references renamed to r]
Original Size: 216 bytes; reduced size: 100 bytes (53.7% minification)
Gzip of output approximately 189 bytes (-89% compression)

The result of this command is the following JavaScript file:

function exampleFunction(n,t,i){return n+" "+t+" "+i}var result=exampleFunction("One","Two","Three")

The tool also allows you to process multiple source files at once, so you can easily combine and pare down multiple JavaScript or CSS files. However, you can only combine the same file types, so it is either multiple JavaScript files or multiple CSS files — remember, no mixing. The syntax is the same as previously used with the exception of the multiple filename specified as this example shows:

AjaxMin.exe file1.css file2.css fileN.css -out combined.css

Integration

While the command line is powerful, it is not the ideal way to use the Microsoft Ajax Minifier tool within your projects; after all, who wants to have to process source files via a command line every time a change is made? As previously mentioned, the files in the MSBuild directory are available to foster integration with your build process; it includes a tasks file for use with MSBuild. In order to use this custom build task in a Visual Studio Project, you need to modify the project file. Read this article by Alexander Turlov for more information on using this approach.

Improve performance with smaller downloads

The approach of the Microsoft Ajax Minifier tool is a simple concept, but it does make sense when trying to improve Web application performance; that is, reduce the number of bytes to download to the requesting client, thus reducing download time. Give it a test drive with your next application rollout.

What approaches do you use to improve Web application performance? Have you used Ajax Minifier or similar tools? Share your experiences and thoughts with the community.