Minify JavaScript and CSS using Microsoft Ajax Minifier

Overview

Compressing and reducing the size of  JavaScript files significantly increases the performance of  website. Compressing can be achieved by configuring IIS to use GZIP compression. Minifying involves removal of unnecessary content from the JavaScript. Microsoft ASP.NET recently released Microsoft Ajax Minifier. This library was being used internally by Microsoft Ajax team to minify the Microsoft Ajax Library before publishing it.

Download Links

• Microsoft Ajax Minifier 4.0

Usage

Microsoft Ajax Minify can be used in two modes: Normal and HyperCrunching.

Normal Mode

The tool will strip off comments, unnecessary white spaces, curly braces, semi colons.

HyperCrunching Mode

The tool will also shorten variable names excluding the global variables name also removes the unreachable code.

Example

var myGlobalVaribaleA;

function TestMinify(myvariableA, myvariableB){
   var myLocalVariable = myvariableA/myvariableB;
}

Running the tool on it, we get the output

var myGlobalVaribaleA;function TestMinify(a,b){var c=a/b}

It also gives you in the output stats:

Original Size: 124 bytes; reduced size: 57 bytes (54% minification)
Gzip of output approximately 168 bytes (-194.7% compression)

Usage Via Command Line

Ajax Minify Command Prompt can be accessed from Start → All Programs → Microsoft Ajax Minifier. The tools come with different switches to control the level of minification.

To check for different switches available, type ajaxmin in command prompt shows all available options.

The default minification will:

1. Remove unnecessary white space.
2. Remove comments (except for statement-level "important" comments).
3. Remove unnecessary semicolons.
4. Remove curly-braces around most single-statement blocks.
5. Rename local variables and function.
6. Determine best string delimiters (single- or double-quotes) based on which option will generate the fewer escaped characters within the string.
7. Combine multiple adjacent variable declarations.
8. Remove empty parameter lists on constructors.
9. Remove unreferenced names for named function expressions.
10. Remove unreferenced local functions.
11. Remove many instances of unreachable code.

* Source: Ajax Minifier documentation

To run it against a JavaScript file, run the following command:

ajaxmin TestJavascript.js -o TestJavascript.min.js -clobber

• -o switch tells it to create the following output file
• -clobber switch tells it to overwrite the existing file (if the file already exists and this switch is not included, it will not create the output)

Integrating with Visual Studio

You can also integrate the tool with Visual studio build process. When the Ajax Minifier is installed, it also adds a build task to msbuild under %ProgramFiles%\MSBuild\Microsoft\MicrosoftAjax.

To add this build task into the project, edit the csproj file. Right click on the project file and click "Edit Project File", else open the csproj in Notepad. Just before the close tag, add the following:

<Import Project="..\MicrosoftAjax\ajaxmin.tasks" />
  <Target Name="AfterBuild" >
    <ItemGroup>
      <JS Include="Test.xml" Exclude="**\*.min.js;Scripts\*.js" />
    </ItemGroup>
    <ItemGroup>
      <CSS Include="**\*.css" Exclude="**\*.min.css" />
    </ItemGroup>
    <AjaxMin JsSourceFiles="@(JS)" JsSourceExtensionPattern="\.xml$" 
      JsTargetExtension=".min.js" CssSourceFiles="@(CSS)" 
      CssSourceExtensionPattern="\.css$" CssTargetExtension=".min.css" />
  </Target>

The above lines tell the build process to include all JavaScript and CSS file exclude those with ".min.js",”.min.css" and those under the scripts folder. So make sure if you want the script to be minified, it is not in the scripts folder. Also, if you want to exclude any JavaScript file, add that to this list. AjaxMin build process tells the source files and target extension pattern to generate the output. Reload the project and press build. An important thing is that the generated files won't be included in the solution by default.

Related Resources

• Microsoft Ajax Minifier Documentation