Click here to Skip to main content
Click here to Skip to main content

Minify Javascript and CSS using Microsoft Ajax Minifier

, 16 Apr 2011
Rate this:
Please Sign up or sign in to vote.
Compressing and reducing the size of JavaScript files significantly increases the performance of a website. Compressing can be achieved by configuring IIS to use GZIP compression. Minifying involves removal of unnecessary content from the javascript...

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

Usage

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

Normal Mode

The tool will strip of 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 comes with different switches to control the level of minification.

Ajax Minifier Command Prompt

Ajax Minifier Command Prompt

To check for different switches available type ajaxmin in command prompt and 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 tells 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 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 wont be included the solution by default.

Related Resources

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

andy404
Software Developer SAP Labs
United States United States
No Biography provided

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web03 | 2.8.140721.1 | Last Updated 16 Apr 2011
Article Copyright 2011 by andy404
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid