Minified JS for beginners

When working with script files (for example jQuery), you might have noticed that from time to time you get two files that look something like this: jquery-1.8.0.js and jquery-1.8.0.min.js. Did you ever wonder what the difference between these files is? Let me explain...

While in development, you are still in the process of writing and editing your script file. So the structure of that file is pretty important. You'll probably use spaces, indentations and line-breaks to create a more readable structure. You'll also use variable names that immediately tell you what their purpose is. Doing this will create a relatively big script file. But since the structure is crucial and you're propably the only person that uses the file, who cares about the file size?

Once you go in production it's a different story... your project (whatever it is) should ready by then so the readibility of the script file is no longer an issue. At the same time the file size becomes very important, because these files will be loaded by all of your users and big resources will slow everything down.

And that's why you should use minified files! The jquery-1.8.0.js file is a bigger file (253 KB) but it's readible, contains structure, comments and variable names that make sense. The file has 9228 lines of code. You should only use this file while developing.

The jquery-1.8.0.min.js file on the other hand is a small file (90,3 KB) and it is... total gibberish. It has no structure or comments and all of the variable names exist of only one letter. It's compressed and not only the structure, also the code is a minimalized version. The file contains only one (very long) line of code. Can you imagine yourself debugging this? This version should be used while in production, it will speed up your page speed which is one of the features your website will be scored on by Google.

As you can see, this is good to know when downloading jQuery.
They will allow you to download the version that you require.
The difference in the file size is huge!

Now, if you have your own script file and you want to minify it as well, you can use Google's Closure compiler. It has some default code, so you can use that to test the compiler. A nice feature here is that it tells you how much percent of the file was saved. You can find it here: https://closure-compiler.appspot.com/home.

There are also two (related?) compilers that might be interesting. UglifyJS is also named one of the best compressors around (next to Closure Compiler): https://marijn.haverbeke.nl/uglifyjs (link intentionally broken as this website seems to no longer exist). The other one does exactly the opposite: JSBeautifier will uncompress minified code and add some structure in attempt to make it more readible: https://jsbeautifier.org/. Since the uncompressor has no context, the degree of added understandability is limited.

I've tested the two minifiers and the results vary. I think it would be a good idea to run a couple of (un)compressors and see which one returns the best result for your script. The JSBeautifier does its job pretty good though. It puts a lot of structure in the file, making it more readible. Unfortunatly the parameters still consist of only one letter, but you could rename these yourself.

Could be useful, right?!