Like Quertime on Facebook!

Top 10 Online Tools to Minify Javascript

Filed under Web Development

Coding is believed to be the most imperative aspect associated with building a web solution or service. The more readable the code is, the better it can be worked upon by multiple developers who haven’t been familiar with the project right from scratch. Especially if you’re coding using popular web technologies like CSS, Javascript etc. Special emphasis must be laid on making the code readable and easy-to-understand.

best-tools-to-minify-javascript

Minification is one such technique which plays a vital role in allowing the developer to remove all the unnecessary characters such as new line characters, space characters, block delimiters, comments etc. from the source code without touching the basic functionality. One of the greatest things about minification is that it involved removal of characters which simply improve the code readability but aren’t necessary for actual execution of the respective code snippet.

In this post, I’ve chosen to highlight details about top 10 Javascript minification tools which will aid you in minifying and compressing the Javascript code pertaining to multiple web development projects. So, let’s get started rightaway!

JSCompress

js-compress

The process of compressing Javascript files comes with a wide range of benefits including: quicker download times, reduced bandwidth consumption of the site, reduced count of HTTP requests on the server and many more. Designed with the sole aim of helping you avail all these benefits, JSCompress is an online javascript compressor which allows you to compress the size of your javascript files by around 30-90%. You can either copy paste your Javascript code or upload Javascript files for removing all the extra whitespace characters and comments which are of no use to the visitors and web browsers.

YUI Compressor

Written in Java, YUI Compressor will start analyzing your source Javascript file for understanding the way it is being structured. After this, it prints out the token stream while ignoring maximum number of white space characters and also replacing the local symbols by a letter symbol like 1, 2, 3 and so on. With YUI Compressor, you’ll gain an easy access to a flawless CSS compression algorithms which uses efficient regular expressions for compressing the source CSS file. Since YUI Compressor is an open-source tool, you can easily have a look at its code for understanding the way it works.

UglifyJS

uglifyjs

UglifyJS is a brilliant Javascript minifier/compressor that’s written in Javascript. It is also equipped with tools which allow you to automate working with the Javascript code snippet. Some of the well-known tools available with UglifyJS include: parser, code generator, mangler, scope analyzer, tree walker and tree transformer. Here, it is important to note that all these APIs and utilities have been defined in ~6500 lines of code, with only a single exception of source-map which is being managed by source-map module.

Minifier

If you’re inclined on just minifying Javascript from the command line without the need for setting up anything in Gulp or Grunt, then Minifier is the tool for you. You can use Minifier for minifying both JS and CSS. Also, this tool will rework URLs in CSS from original location to output location. Last, but definitely not the least, Minifier will automatically resolve @import statements in CSS.

Ajax Minifier

Ajax Minifier is basically a Windows application which allows you to minify all Javascript files in several nested folders or a single folder. You can choose to minify individual javascript files and enable or disable minifier’s hypercrunch and multiple analysis options. With the all new version of free GUI for Microsoft Ajax Minifier, you can also opt for opening the output folder once the minification process has been completed and view the minifier’s output.

Koala

koala

As a yet another free tool for Javascript minification, Koala can also be used for compilation of SASS and LESS. It is basically a GUI application for compilation of SASS, LESS, Compass and CoffeeScript. The best thing about Koala is that it can run on Linux, Windows and Mac. Some of the core features available with Koala include: multi-lingual support, several compile options, real-time compilation, error notification and many more.

Douglas Crockford’s JSMin

JSMin is basically a filter which removes comments and all the unnecessary white spaces from Javascript files. It simply reduces the filesize by half, leading to faster web page downloads. By eliminating the download code of self-documentation, Douglas Crockford’s JSMin also plays a critical role in encouraging an expressive programming style. A greatest asset of JSMin is that it doesn’t modify the behavior of the program that it is minifying currently.

Dojo ShrinkSafe

As an amazing Javascript “compression” system, ShrinkSafe can conveniently reduce the size of your Javascripts by a third or more in accordance to the current programming style. Based on one of the most recommended Javascript Interpreter called Rhino, Dojo ShrinkSafe transforms the source of your file(s) in such a way that the resultant script functions in exactly the same way as the original file which had been uploaded. One of the greatest things about ShrinkSafe is that it never changes a particular API or public variable, that means you can easily incorporate the compressed Javascript into any of your web pages without having to change the code associated with the respective javascript.

Prepros

prepros

Prepros is an excellent tool for compiling Sass, LESS, Stylus, Compass, Jade etc. using automatic CSS prefixing. Equipped with a built-in server, Prepros is cross-browser compatible and can run on Mac and Windows. With Prepros, you can easily minify Javascript files for reducing bandwidth and load time. Prepros comes with a built-in server that can be used for previewing projects without file url restrictions. This tool also generates source maps for all the compiled files which can further allow you to debug your website in a less tiring manner.

Smaller

smaller

As a powerful and highly robust HTML, Javascript and CSS compressor on OS X, Smaller comes with the ability of combining multiple files into a single file. Also, you can use the tool for compressing your files in order to make the websites load faster. All you need to do is simply drop the specific files or folder and Smaller would add all the CSS/HTML/JS files to the minify queue.

Summing Up

So these were the ten high-end Javascript minification tools which if used in the right format will undoubtedly aid you in presenting the code excellently and pacing up your site’s speed by a great leap.

Guest Author: Victoria Brinsley

Victoria Brinsley is a skilled Android app developer for Appsted Ltd – a reliable Android development company. You can explore more about the development tips and tricks by clearing your queries with her.

Tags: , ,