All language subtitles for 177 How Minification Works to Reduce File Size.en_US

Now for the inquisitive ones amongst you you might have copied this URL where our jQuery library

resides and tried to take a look at it. And if you did this is what you would see, it looks like a huge

mess.

But this is essentially the minified version of the jQuery library.

And you might notice that it looks very similar from the Bootstrap CDN that we used previously.

When you copy the URL there and paste it and load it in your browser, then you can see again you

have this huge mess of code.

Now what exactly is all of this?

Let's take a section of this and copy it, and inside Atom I'm going to open a new page.

I'm going to show you what this minification does.

So essentially we've still got the same Bootstrap code.

So in the case of Bootstrap then it is CSS,

and in the case of jQuery then it's Javascript code.

But essentially all of the spaces, the new lines, the comments, have been removed from the file to try

and reduce its size.

But you can see that as I've been combing through this and separating out these lines into the familiar

formatting that we're used to, then you can see that it's just CSS code.

And this is simply just Javascript code.

And in fact if you head over to minifier.org, which is a way of converting your Javascript or CSS

code to a minified version.

Now to test it out I've got our index.js from our drumkit code and at the top I'm going to add

a comment.

This is a comment. And you can see that it's got a lot of spaces, new lines, new paragraphs.

But we're going to copy its entirety by just hitting command or control A and then command or control

C, and then we're going to take it over to our minifier and we're going to paste that in.

And now we're going to select Javascript and hit Minify, and you can see that it's just crunched everything

together and got rid of comments.

So now you can see that our original script was 1539 bytes, our

minified script is only 1113 bytes.

So we have gained 426 bytes, making our files smaller and therefore quicker for our users to load.

And this is exactly the reason why we minify our Javascript or our CSS, because all of this code has

to be loaded up by your users' browser.

Now depending on their Internet speed, that may take a short time or a long time. Now because the browser

doesn't care about tabs, indents, spaces and comments, it completely ignores all of it,

there's no point asking the user to load up all of this unnecessary information, and by minifying

we get rid of those things and make our web site load much faster.

So if you download the jQuery library straight up then you'll see something that looks a bit like

this.

Now as with all libraries they'll come up with a standard version that is human readable and they'll

also have a minified version that's just intended for the browser.

And this is so that you can customize the code if you wish and then minify it yourself, or if you don't

want to do any customization then simply to just drop the jQuery file into your project.

All right.

So in the next lesson we're actually going to be getting down and dirty and actually exploring all the

things that you can do with jQuery, starting by selecting elements.

So for all of that and more, I'll see you on the next lesson.