Minify Javascript


Why minifys your JS

  • Quicker download times for your users.
  • Reduced bandwidth consumption of your website.
  • Reduced number of HTTP requests on your server when combining many javascript files into one compressed file, thus reducing the server load and allowing more visitors to access your website.
  • Comments and whitespace are not needed for javascript execution; Removing them will speed up script execution times.

Available tools:

Closure Compiler
Built in Java From Google

They say:
It parses your JavaScript, analyzes it, removes dead code and rewrites and minimizes what’s left.

http://code.google.com/p/closure-compiler/
Can be used with Closure Builder to generate your compressed JS
Or if you do not use any of these builders you can copy and paste in the code at:
http://closure-compiler.appspot.com/home

YUI Compressor
Built in Java From Yahoo

Relies on Rhino
Also compresses CSS

They say:
It starts by analyzing the source JavaScript file to understand how it is structured. It then prints out the token stream, omitting as many white space characters as possible, and replacing all local symbols by a 1 (or 2, or 3) letter symbol wherever such a substitution is appropriate

http://yui.github.io/yuicompressor/

Packer
Available as .NET, perl and PHP applications

Does not offer the ability to gzip your files
Online minify available online.

http://dean.edwards.name/packer/

UglifyJS2
Built in Node

They say:
This package implements a general-purpose JavaScript parser/compressor/beautifier toolkit.
Apache Ant would be a good build tool to run this compression automatically.

https://github.com/mishoo/UglifyJS2

Good comparison websites are:
http://compressorrater.thruhere.net
https://github.com/mishoo/UglifyJS#compression–how-good-is-it

There is some confusion as you look at the data which one is the best, but as they all drastically reduce the size of the provided files to the user I think its worth using any of these.

Try to implement one of these into your build script to make life easy in the long term.

1 comment for “Minify Javascript

  1. Kelly Stephens
    August 9, 2013 at 11:43 pm

    Great break down. I have been using the UglifyJS library to minify my JS since his 1 release. I have always been happy with the results and the concatenation of the variables is a nice bonus.

    Though I have gotten lazy and found an online tool that uses UglifyJS 2 and is one that actually is updated regularly. http://www.blimptontech.com give it a try if you just want to copy and paste or upload a bunch of files, to combine and minify them.

    Keep up the great posts.

Leave a Reply

Your email address will not be published. Required fields are marked *