- [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.
Author
Updated
4/1/2019Released
5/17/2017Through practical examples and mini-projects, this course helps you build your understanding of JavaScript piece by piece, from core principles like variables, data types, conditionals, and functions through advanced topics including loops, closures, and DOM scripting. Along the way, you will also be introduced to some ES6 and the basics of JavaScript libraries.
- What is JavaScript?
- Working with data
- Using functions and objects
- Working with JavaScript and the DOM
- Changing DOM elements
- Handling events
- Working with loops
- Making images responsive using markup
- Troubleshooting code
- Validating functionality
- Minifying JavaScript
Skill Level Beginner
Duration
Views
Related Courses
-
Introduction
-
Welcome1m 7s
-
-
1. JavaScript: An Introduction
-
What is JavaScript?2m 38s
-
-
2. The Basics
-
Introducing the browser console10m 31s
-
3. Working with data
-
Data types in JavaScript4m 2s
-
Arrays2m 20s
-
4. Functions and Objects
-
Functions in JavaScript3m 28s
-
Build a basic function3m 29s
-
Anonymous functions5m 11s
-
Variable scope3m 17s
-
ES2015: let and const6m 12s
-
Make sense of objects3m 19s
-
Object constructors6m 16s
-
Closures8m 11s
-
-
5. JavaScript and the DOM, Part 1: Changing DOM Elements
-
Access and change elements4m 33s
-
Access and change classes3m 45s
-
Access and change attributes4m 53s
-
Add DOM elements6m 56s
-
6. Project: Create an Analog Clock
-
Use CSS to move clock hands3m 49s
-
7. JavaScript and the DOM, Part 2: Events
-
What are DOM events?1m 31s
-
Some typical DOM events1m 59s
-
Add and use event listeners6m 51s
-
-
8. Project: Typing Speed Tester
-
Rundown of HTML markup2m 58s
-
Build a count-up timer5m 56s
-
Add a reset button5m 3s
-
-
9. Loops
-
Loops3m 37s
-
Looping through arrays4m 7s
-
Break and continue loops7m 9s
-
-
10. Project: Automated Responsive Images Markup
-
Project breakdown1m 55s
-
Rundown of project setup3m 26s
-
-
11. Troubleshooting, Validating, and Minifying JavaScript
-
Troubleshooting JavaScript7m 20s
-
Online script linting5m 57s
-
Automate script linting8m 24s
-
Online script minification2m 50s
-
Automate script minification2m 24s
-
12. Bonus Chapter: Ask the Instructor
-
What are arrow functions?3m 11s
-
What does the % symbol do?3m 47s
-
-
Conclusion
-
Next Steps1m 55s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Online script minification