Online script minification

- [Instructor] When you're done writing your JavaScript, you've tested it, you've linted it, it's ready to go onto the web, it's a good idea to minify or uglify the script. Minification of JavaScript means removing all unnecessary white space, removing all commons, and optimizing the code so it's easier to download and run for the browser. This also makes the code completely unreadable to us humans, so typically you would minify the code, put it into a separate file and then reference that file from index.html or whatever main document you're using.

There are many different tools available to minify your JavaScript, and you'll find lots of options if you just google JavaScript minification. This is one of them. It's just called minifier.org. To use it, simply copy your JavaScript, paste it in, click Minify, and out comes the minified version. Down here you see even though the script is really short, the original script was 2,082 bytes, the minified script is 1,498 bytes, so we gained 584 bytes by minification.

Of course, it doesn't make much difference for a small script like what I have, but when you start writing really big JavaScript files, minification really makes a difference. It also makes a difference if you write JavaScript that ends up on a site that a lot of people are visiting because then a lot of people need to download all of those JavaScript files, and the smaller they are, the less bandwidth you're using. Once the minification is complete, copy all the code again, go back into your project and create a new file, call it script.min.js.

This is the standard way of marking up a minified file. Paste the code in, and here you see what I was talking about. It's very hard to read for us humans, but the computer doesn't care. Save the file, go to index.html and find the reference to you JavaScript right here, change the reference to script.min.js, save it, open the site in the browser, and everything works exactly the same way it did before, only difference is, the JavaScript file is much smaller.

Now before we leave this, let me show you one really neat trick. Remember this Sources panel in the Developer Tools that we used to look at our JavaScript? Well if you open the JavaScript right now, it is unreadable and very hard to debug, however, if you click on this link at the bottom here that says Pretty print, it unminifies the code and makes it human readable again. So now we can run the same kind of debugging on our minified code that we did on the unminified version.