14 Tools For Minifying Javascript

Javascript minification is a technique which condenses your script into a much smaller footprint. You lose human readability but you conserve considerable bandwidth – in the end, Javascript is meant for your browser not for your users.

Most production websites use Javascript minification but the way this is achieved varies greatly. From simple online converters to more comprehensive GUI tools to command line interfaces, our options are pretty varied. In this article we’ll take a look at how Javascript minification works, how we can build it into our workflow and what the pros and cons of minifying are.

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

etc.

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")

Javascript Minification Tools

The tools used for minifying Javascript can be broadly categorized into 3 groups: online tools, GUI tools and command line tools.

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 Tools

javascript-minifier.com is nice-looking tool with an API

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.

GUI 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.

One the other hand, they offer you more features in general and provide you with automation. Your JS files will be minified each time you save them, no need to manually minify them. If you’re developing something in Javascript this is definitely the way to go.

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

Grunt has an extension for Javascript minification named grunt-contrib-uglify

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.

Overview

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.

Each group of tools have their pros and cons and in truth you will probably end up using one of each at some point or another. Keep in mind that when in a production environment you should always minify your Javascript and CSS!