Building javascript minification into MSBuild scripts

A while back when I had a play with javascript minification to speed up the download of a site I was working on I found a tool called Packer.NET that’s a ready made to work with MSBuild.

Which algorithm to use?

The minification tool supports JSMin and Packer.

JSMin just strips out the parts of the file that the browser won’t need like extra whitespace and comments. You can run JSMin over CSS and javascript.

Packer does the same sort of minification as JSMin but also has options to reduce variable names to single characters and to base-62 encode everything. Packer tends to give very small file sizes when you use the base-62 option but there’s a performance hit in the browser when it gets unpacked. Packer will only run on javascript.

One thing is keep in mind is whether or not you’re using gzip compression. JSMin with gzip compression tends to give files that are almost the same as Packer but without the clientside performance hit of unpacking them. Gzip tends not to make as much of a difference to files minified with the base-62 encoding option.

A good way to find out which will be best is to run your particular script through the compressor comparison tool.

Using the tool

Packer.NET comes as a single dll so you don’t need to install any command line programs to use it. I put the assembly into source control on our system so anyone who wanted to run the build script wouldn’t need to install it manually.

Here’s an example target that uses JSMin to minify all CSS files and all javascript files (except library files that are already minified). This example simply replaces the existing files:

  1. <import Project="$(MSBuildExtensionsPath)\SmallSharpTools.Packer\MSBuild.Packer.Targets" />
  2. <target Name="Minify">
  3.     <!– minify javascript and CSS –>
  4.     <itemgroup>
  5.       <javascript Include="$(SolutionRoot)\**\*.js"
  6.           Exclude="$(SolutionRoot)\**\*pack.js;"/>
  7.       <stylesheet Include="$(SolutionRoot)\**\*.css" />
  8.     </itemgroup>
  10.     <!–  –>
  11.     <message Text='Minifying javascript: %(Javascript.FullPath) … ' />
  12.     <packer OutputFileName="%(Javascript.FullPath)"
  13.         Mode="JSMin"
  14.         InputFiles="%(Javascript.FullPath)"
  15.         Verbose="true"
  16.         Condition="Exists(%(Javascript.FullPath))" />
  17.     <message Text='Minifying css: %(Stylesheet.FullPath) … ' />
  18.     <packer OutputFileName="%(Stylesheet.FullPath)"
  19.         Mode="CSSMin"
  20.         InputFiles="%(Stylesheet.FullPath)"
  21.         Verbose="true"
  22.         Condition="Exists(%(Stylesheet.FullPath))" />
  23. </target>

There’s documentation with more examples and details on the different options that the task supports.

What about YUI compressor?

YUI compressor is another good option for minifying javascript and CSS. There’s also an example MSBuild task for that.

Posted on 29 Aug 09 by Helen Emerson (last updated on 29 Aug 09).
Filed under ASP.NET, CSS, Javascript, Tools