Click here to Skip to main content
15,868,340 members
Articles / Programming Languages / Javascript

Automatically Compress Embedded JavaScript Resources with Microsoft Ajax Minifier

Rate me:
Please Sign up or sign in to vote.
4.50/5 (2 votes)
14 May 2010CPOL3 min read 41.5K   8   16
Automatically compress embedded JavaScript resources with Microsoft Ajax Minifier

Recently, Microsoft has announced yet another useful addition to an ASP.NET developer tool belt: Microsoft Ajax Minifier, a tool that enables you to reduce the size of a JavaScript file by removing unnecessary content from it. Clearly, this is an extremely useful tool and the ASP.NET development community has gladly embraced it (just Google it up to see a lot of positive responses). The tool indeed works very well and there have even been a number of articles comparing it to other well-known JavaScript compression tools that proved its quality. So there are no doubts whether to use the Minifier or not.

The question however is how to use it. Microsoft Ajax Minifier package does include a set of documentation that explains how to use the tool and even discusses a couple of usage scenarios. Unfortunately, the way I wanted to use the Minifier is not covered in the documentation and for some reason, I haven't found useful information on the Internet too so I've decided to do some research and share my findings with the community.

So How Would I Like to Use the Minifier?

Here are the requirements:

  1. I want to automatically compress embedded JavaScript resources in any project of my web application solution.
  2. I want the compressed JavaScripts have the original names so I don't have to change the references in HTML mark-up.
  3. I want the compression to be done only when I switch to the Release mode in Visual Studio. When I am in the Debug mode I want all the JavaScript files to be uncompressed for easier debugging.
  4. I want compressed JavaScript files never overrides the original JavaScript files and I don't want to keep the compressed JavaScripts so whenever I modify my JavaScript code, the compressed resources are always up-to-date.

I believe that the requirements above describe one of the most common web application solution configuration so if there is a way to achieve them, it would be very useful.

Can I Achieve the Requirements Above with the Microsoft Ajax Minifier?

The answer is yes. The solution is kind of obvious: since the Microsoft Ajax Minifier includes an MSBuild task, I just need to modify a project file where I have embedded JavaScript resources that I need to be compressed to include the Microsoft Ajax Minifier build task. It does not sound complicated and below is the solution which is simple indeed. Just include the following XML in your project file right before the closing </Project> tag (in most cases):

XML
<!-- Minify all JavaScript files that were embedded as resources -->
<Import Project="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\ajaxmin.tasks" />
<PropertyGroup>
<ResGenDependsOn>
MinifyJavaScript;
$(ResGenDependsOn)
</ResGenDependsOn>
</PropertyGroup>
<Target Name="MinifyJavaScript" 
Condition=" '$(ConfigurationName)'=='Release' ">
<Copy SourceFiles="@(EmbeddedResource)" DestinationFolder="$(IntermediateOutputPath)" 
Condition="'%(Extension)'=='.js'">
<Output TaskParameter="DestinationFiles" 
ItemName="EmbeddedJavaScriptResource" />
</Copy>
<AjaxMin SourceFiles="@(EmbeddedJavaScriptResource)" SourceExtensionPattern="\.js$" 
TargetExtension=".js" />
<ItemGroup>
<EmbeddedResource Remove="@(EmbeddedResource)" 
Condition="'%(Extension)'=='.js'" />
<EmbeddedResource Include="@(EmbeddedJavaScriptResource)" />
<FileWrites Include="@(EmbeddedJavaScriptResource)" />
</ItemGroup>
</Target>

What this script does is when the solution configuration is 'Release', it finds all the project embedded resource files with the extension '.js' and creates their compressed versions with the same names in the intermediate output folder where they are picked from later by the build process.

A Few Tips

As you may have noticed, the Microsoft Ajax Minifier MSBuild task is referenced from the default folder where it was copied to by the installer. If you want to reference it from a different location, for example, if you have a shared development environment and want to have similar setting for everyone, just copy two files, ajaxmin.dll and ajaxmintask.dll to another location and include the <UsingTask> tag (below) instead of the <Import> tag in the script above:

XML
<UsingTask TaskName="AjaxMin" 
AssemblyFile="$(MSBuildProjectDirectory)\..\Build\AjaxMinTask.dll" />

The presented script performs so called 'Normal Crunching' (see the Ajax Minifier documentation) of the JavaScript code which already does a pretty good job that is good enough in most of the cases: compression rate is over 50%. If you would like to turn on the 'Hypercrunching' mode (see the Ajax Minifier documentation), you only need to modify one line of the script to include the 'LocalRenaming' option of the Ajax Minifier:

XML
<AjaxMin SourceFiles="@(EmbeddedJavaScriptResource)" SourceExtensionPattern="\.js$" 
 TargetExtension=".js" LocalRenaming="CrunchAll" />

And the last note is: don't use the default Hypercrunching mode or RemoveUnneededCode option with the ASP.NET AJAX Framework as it does not work properly with it.

License

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


Written By
Architect
Canada Canada
Alexander Turlov is a professional software development consultant that has been working in IT industry since 1987. His programming experience includes such languages as FORTRAN, Pascal, Basic, C, C++ and C#. He's been working for different industries including but not limited to science, manufacturing, retail, utilities, finance, insurance, health care, education and so on. His area of professional interests is cloud powered rich web applications development with .NET, C#, ASP.NET/MVC and JavaScript. He is working in software development doing architecture, design and development on .NET platform and using Microsoft Visual Studio, Azure and Visual Studio Team Services as his primary tools. He holds a M.Sc. degree in physics and various industry certifications including MCSD.NET, Azure and Scrum.

View my profile on LinkedIn

View my blog

Comments and Discussions

 
QuestionSomething is going wrong when trying to do it with the new ajax minifier and visual studio 2010 Pin
ekelvin25-Sep-12 23:52
ekelvin25-Sep-12 23:52 
AnswerRe: Something is going wrong when trying to do it with the new ajax minifier and visual studio 2010 Pin
Alexander Turlov4-Oct-12 5:17
Alexander Turlov4-Oct-12 5:17 
QuestionAutomatically compress embedded JavaScript resources with Microsoft Ajax Minifier Pin
Diana Margulis14-Mar-12 4:38
Diana Margulis14-Mar-12 4:38 
AnswerRe: Automatically compress embedded JavaScript resources with Microsoft Ajax Minifier Pin
Alexander Turlov4-Oct-12 5:07
Alexander Turlov4-Oct-12 5:07 
GeneralCan we do for Content instead of Embedded? Pin
atulsirpal10-May-11 3:14
atulsirpal10-May-11 3:14 
AnswerRe: Can we do for Content instead of Embedded? Pin
Alexander Turlov11-May-11 5:53
Alexander Turlov11-May-11 5:53 
GeneralMy vote of 4 Pin
Yves10-Mar-11 14:15
Yves10-Mar-11 14:15 
GeneralGot errors Pin
Yves9-Mar-11 18:00
Yves9-Mar-11 18:00 
AnswerRe: Got errors Pin
Alexander Turlov10-Mar-11 8:41
Alexander Turlov10-Mar-11 8:41 
GeneralRe: Got errors Pin
Yves10-Mar-11 14:13
Yves10-Mar-11 14:13 
GeneralRe: Got errors Pin
Yves10-Mar-11 14:14
Yves10-Mar-11 14:14 
AnswerRe: Got errors Pin
Alexander Turlov19-Mar-11 11:41
Alexander Turlov19-Mar-11 11:41 
GeneralNot sure were to apply Pin
Member 77393669-Mar-11 4:31
Member 77393669-Mar-11 4:31 
AnswerRe: Not sure were to apply Pin
Alexander Turlov10-Mar-11 8:36
Alexander Turlov10-Mar-11 8:36 
GeneralThank you! Pin
thomasorton28-Feb-11 5:17
thomasorton28-Feb-11 5:17 
GeneralThanks Pin
pentas coder7-Dec-10 4:50
pentas coder7-Dec-10 4:50 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.