Selecting a JavaScript Minifier (Spoiler: Microsoft Ajax Minifier Wins)

When I started writing JavaScript for production use, the final step in the process was selecting a minifier to wrap the code up to a tidy, ready-to-deploy bundle. Back in the day, the go-to for that was YUICompressor, but times have changed.

Goodbye YUICompressor

I’ve been using the YUICompressor JavaScript minifier for ages and it was time to update to a more current version of the tool.

Checking out the options, it turns out that YUICompressor (along with all other YUI tools) is no longer being supported by Yahoo as of August 2014. Not a good sign, but it seems the tool is still being supported by a third party so it should be good to go.

Giving the latest YUICompressor 2.4.8 a try, I was immediately presented with an error indicating that the tool could not find the source file to compress. A bit of searching showed me that this particular YUICompressor error in finding the input file’s path has been outstanding since 2013 and appears unlikely to be addressed soon.

Hey, we all accidentally deploy bugs every now and then, but when something basic/essential like the input file path for a command line tool remains broken for over three years… Well, nature always finds a way to let us know when software is no longer being supported, and red flags like this are one of those little hints.

With that, it’s time to say goodbye to YUICompressor and find another minifier.

So… Uglify?

An online search will quickly show that the go-to JavaScript minifier these days is Uglify.

To be pedantic it’s ‘Uglify2’ (support for the original Uglify has been dropped) but everyone refers to the tool without the appended version number. Web searches for questions about ‘Uglify’ will usually direct you appropriately, but you’ll want to watch out for confusion between ‘Uglify’ and ‘Uglify2’ when downloading: The original (abandoned) Uglify is still listed on GitHub.

Uglify works with NodeJS so, if you’re like me and had not previously touched NodeJS, a quick detour is required to first install Node and get familiar with the basics before proceeding. This StackOverflow post will provide you with a bit of extra guidance on that if you’re as new to NodeJS as I was.

Once NodeJS has been installed, the latest uglify-js package has been retrieved, and your computer has been rebooted to ensure all path variables are set for NodeJS, a run on the Windows command line:

will provide you with a basic minification, with spaces, comments and carriage returns snipped out of the code. Function and variable names remain unminified.

I could not find the magic invocation syntax on Uglify which would bring about full code minification

The ‘mangle’ option in Uglify will apparently handle the minification of variable and function names, but I could not get that working for the life of me.

That seems to be a pretty common issue with Uglify, and some developers have been able to resolve those Uglify function/variable name minification difficulties, but I wasn’t one of them. Try as I might, I could not find the magic invocation syntax on Uglify which would bring about full code minification, and the complete lack of use-case examples or even error output at the command line brought me nothing but frustration.

So, even though Uglify seems to be awesome for almost everyone else out there, it just wasn’t the tool for me. Time to look elsewhere.

Chosen Solution: Microsoft Ajax Minifier

The next option on my list of candidates was the Microsoft Ajax Minifier (ajaxmin).

Ajaxmin remains under reasonably active development and numerous blog posts show it has been actively dogfooded through internal use at Microsoft for years.

The tool is a simple stand-alone exe command line utility and installation was a breeze: Just run the downloaded .msi file and everything is put place.

The ajaxmin ‘getting started’ documentation shows exactly what needs to be done to run the tool, and a quick command line entry of:

Fully minifies the code.

Hallelujah!

Less than five minutes after I had started with this tool, not only were all comments, spaces and carriage returns snipped out of the production JavaScript, all function and variable names were minified as well. All of it done right from the basic command line option and without requiring third-party libraries, platforms, wrappers or a trip down the StackOverflow rabbit hole to find an obscure command to bring that functionality about.

No extra installs. No detours to minify JavaScript variables and function names.

It just works.

But wait! There’s more!

A review of the superb documentation for the ajaxmin command line switches shows a number of analysis and testing options are provided with the tool as well.

Let’s try the code analysis.

Using an example where the source, destination and analysis output are all retrieved from and output to the e:\ directory, this command:

Provides a listing of all actions performed on sourcefile.js to create your minified destfile.js, with that output placed in the text file analysis_output.txt

If you’ve ever wondered how your minifier is mapping the minified names to your functions and variables, that analysis_output.txt will give all the answers you’ll need.

Any undefined global references in your code will also be flagged by that analysis, so you’ll want to clean up your output by excluding any external libraries you’re referencing in the code. That can be done with the –global flag, as with this example for excluding references to the jQuery library:

With that done, a scroll down to the bottom of your generated analysis_output.txt will point out any undeclared global references which may have escaped your earlier code reviews. It’s a fantastically handy QA check.

The basic, bare-bones out-of-the box command line run of ajaxmin may provide all of the code minification you’re needing.

If you need an even more extensive review of your code (and who doesn’t?) you can also analyze your code with the “use strict” directive to point out any JavaScript which does not conform to the ECMA-5 standard. The –strict flag will handle that for you.

There are many other options available for further code obfuscation, such as explicit variable and property renaming, and those can be found through the ajaxmin command line switch documentation, or with use of the -? ajaxmin command line flag to display the available options. That flexibility is really nice to have, but you might not even need those more advanced options: The basic, bare-bones out-of-the box command line run of ajaxmin may provide all of the code minification you’re needing.

In summary, the Microsoft Ajax Minifier provides absolutely everything needed for JavaScript code minification in a compact, clearly documented package. I cannot recommend the tool highly enough.