Recommended Reading: Useful Chrome DevTools Tips For Developers
How Minification Works
The best way to learn what happens when you minify your code is to take a look at the UglifyJS Github Repository. This script is used in many online converters as well as GUI tools and command line tools like Grunt. Here are some of the transformations it applies to make your code shorter:
- Removes unnecessary space
- Shortens variable names, usually to single characters
- Joins consecutive var declarations
- Converts arrays to objects where possible
- Optimizes if statements
- Calculates simple constant expressions
As a quick example, here’s a function that essentially writes some given text out.
function hello( text ) document.write( text );
hello( 'Welcome to the article' );
Let’s see what happens when we minify this. Note the removal of spaces and indentation and the shortening of the text variable.
function hello(e)document.write(e)hello("Welcome to the article")
- With online tools it is usually a matter of pasting your code and copying the result immediately.
- GUI tools often contain a lot more functionality; JS minification is just a small part of what they do.
- Command line tools are also usually more comprehensive, offering minification as a module.
- Online YUI Compressor is a more powerful tool which uses the YUI compressor, with lots of options and CSS minification capabilities as well
- jscompress.com is a no-frills minifier but it gets the job done
- jsmini.com is another simple but wholly usable option
The great thing about online tools is the speed with which you can work with them. Complex GUI and command line tools minify quicker but you need to have a project set up for it to work properly. The downside to these tools are that they mostly provide little to no customization, at least when compared to command line tools.
- Koala is a free tool for LESS, SASS compilation, JS minification and a lot more
- Prepros is a cross-platform paid app which gives you even more options
- Codekit is my app of choice. It is a paid Mac-only app that offers code compilation, minification, a preview server, bower package management, and a lot more
- AjaxminGui is a free, single-purpose Windows tool for minifying your JS
- UltraMinifier is a free app for OS X which minifies CSS and JS with drag and drop
- Smaller is an OS X tool which minifies and concatenates files for you
I’ve mentioned two types of GUI apps here. The simple one-step minification apps are much like their online counterparts. They are extremely quick to use since you can just drag-and-drop files into them, no setup required. That said, they provide virtually no customization.
Larger GUI tools (Prepros, Koala, Codekit) are great at managing projects and giving you a bit more options for compression but they do need a little bit of setup. A quick JS minification would take about 20 seconds of setup which is a lot, compared to the 2 second process of online or simple GUI tools.
Command Line Tools
- Minify is for those who want to minify JS from the command line but don’t want to set up anything fancy in Grunt or Gulp
- Uglify.js which we’ve mentioned before is also available as a stand-alone command line tool
- Gulp also has JS minification using Uglify.js through gulp-uglify
Command line tools are not just for Linux geeks! I’m not great at the terminal but setting up things like Grunt and Gulp is easy through their great documentation. The upside of command line tools is the awesome amount of flexibility you have from options to output.
On the other hand, there is a bit of a learning curve. Getting used to the command line takes some (not a lot of) practice which you will find restrictive before you start enjoying the benefits.
If you’re new to web development, I would recommend one of the first three GUI tools. They will help you manage your projects in general and offer much more than just JS minification.
If you’re a seasoned pro you should probably look into Grunt or Gulp as these offer the most control over automation tasks. If you need to minify a script quickly without setting up a project, the command line tools can save you a lot of time.