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
To check for different switches available type ajaxmin in command prompt and shows all available options.
The default minification will:
- Remove unnecessary white space.
- Remove comments (except for statement-level "important" comments).
- Remove unnecessary semicolons.
- Remove curly-braces around most single-statement blocks.
- Rename local variables and function.
- Determine best string delimiters (single- or double-quotes) based on which option will generate the fewer escaped characters within the string.
- Combine multiple adjacent variable declarations.
- Remove empty parameter lists on constructors.
- Remove unreferenced names for named function expressions.
- Remove unreferenced local functions.
- 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
