14 Tools to Minify 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 modification, 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.

How Javascript 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, 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 three groups: online, GUI, and command line.

• 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 minified 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 set up a project for it to work properly. The downside to these tools is 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
• UltraMinifier is a free app for OS X which minifies CSS and JS with drag and drop

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.

On 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 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 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 has its pros and cons, and in truth, you will probably end up using one at some point or another. Keep in mind that when in a production environment, you should always minify your Javascript and CSS!