The web technology today has improved dramatically and the way scripting is done on websites have changed drastically over the years now. Gone are the days when JavaScript was used to just validate forms. JavaScript now holds the major share of the website code. But this also resulted in JavaScript files being heavier which in turn has its own effects like slower loading of the page etc. The JavaScript files are now much heavier and that requires us to minify and pack the JavaScript files so that the file size becomes much lesser without compromising on the quality or the functionality.
So what is minifying a JavaScript file?
Minifying a JavaScript file basically means to compress the file by removing all the unnecessary characters from the file which does not affect the functionality. The unnecessary characters usually can be new line characters, white spaces, comments and block delimiters. These unwanted characters are usually added to improve the readability and does not affect the functionality or the execution.
For e.g :
Adddata.js has the following data inside it.
//The function below adds two given numbers and returns the value.
function addnumbers (number1, number2)
{
var c = parseInt(number1) + parseInt(number2);
return c;
}
The same can also be written as:
function addnumbers(a,b){var c=parseInt(a)+parseInt(b);return c}
If you notice, the comments and the white-spaces and the newlines have been removed from the code making the file lightweight.
What is JavaScript Packing?
JavaScript packing is also basically JavaScript minifying but under packing the JavaScript code goes through a Base62 encoding. It actually maps the source code using Base62 which then must be rebuilt on the client side through eval() in order to be usable. The algorithm for JavaScript packing was developed by Dean Edwards . This method of compressing reduces the file size dramatically. But let me put a word of caution here; before you pack the JavaScript code, please ensure that you terminate all the JavaScript statements including the function declarations.
For e.g
function addnumbers()
{
var a = 5;
//more code goes here
};
Caution : Packing a JavaScript file reduces the file size dramatically and hence reduces the download time but remember that though it reduces the file size, it might increase the execution or the processing time since the script has to run through the eval() function first to be rebuilt before the actual execution.
How to minify / Pack a JavaScript file ?
There are various tools available online these days. I would recommend the one provided by Dean Edwards available at http://dean.edwards.name/packer/ (Since he is the one who found the algorithm to pack and the tool is simple too) . But there are many other versions available over the Internet now.
The others are :-
- JSCompressor available @ http://jscompress.com/
- YUI Compressor available @ http://developer.yahoo.com/yui/compressor/
- JSMin available @ https://www.crockford.com/jsmin.html
- Google Closure Compiler @ https://developers.google.com/closure/compiler/
- UglifyJS available @ http://marijnhaverbeke.nl//uglifyjs
There are many other tools available online that you can just Google through. Choose the one that you are comfortable with.
How to Unminify or Decompress a javascript file?
Well, if you already have a minified or compressed javascript file and you want to unminify or decompress the javascript then you may try
This site provides an easy to use online tool to unminify or decompress or deobfuscate a javascript code. It is pretty easy to unminify the code on this site.
Happy compressing 😉 !!