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 same can also be written as:

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

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 :-

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

http://jsbeautifier.org/

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 ;)  !!

Related Posts

  • How to optimize png images ? Well its a fact that a large number of us use PNG images on their website. Most of us might keep images in PNG format for the sake of transparency, clarity and so on. […]
  • How to make or convert LTR website to a RTL or Right-to-left Website? I'm sure all of us want our websites to be visited and loved by people all over the world. And yes we would also like it to be shared on social media sites where people […]
  • Px to Em conversion With a variety of browsers flooding the market and fluid design being a concern, Front-End developers try to be more alert with their code and the unit of measurements […]
  • What is Google Resizer? Google has launched a new service named Resizer. Google resizer is basically an interactive viewer which helps you to view your website in various design breakpoints […]
  • How to replace all occurrences of a string in JavaScript? Out of the different "Data Types" in JavaScript, String has been one of my favorites. It is also one of the most widely used Data Type. It would not be an […]
  • Load Timeout for Modules Error in RequireJs RequireJs is a very helpful JavaScript Module Loader. If you've been working on BackboneJS, AngularJs or KnockoutJs you would have most likely come across RequireJs. […]