A great way to increase the efficiency of our code is by externalizing and minimizing our code.
It's very easy to do. You would just take everything inside the
script tags, remove it, and then create a new text file with a .js extension. Then you would simply use a
script tag to point to that file.
script tags and cut it.
And then we can get rid of the
script tags altogether by highlighting and deleting them.
But we can jump back over to our index.html. And then, after we've loaded all our dependencies, we'll create our own
script tag to load the file that we just created.
js/ and then I called it
site.js, so the code is:
Now, how do you minify? There are several options.
Visual Studio Code Plugins
Keep in mind that after you minify your code, you need to change the file that you're pointing to in the HTML file. So if you minified site.js, then you would have a new version probably called site.min.js. And so in your HTML, you would want to point to that minified version instead of the original version of your code. Otherwise, all that minification is pointless
If for some reason you just like using notepad to do all of your code editing, you can still minify, and one way you can do that is by going to a website like JSCompress.
The benefit to that is that if you've created your website in Texas and somebody in the UK wants to access your website, then without a CDN, that user would have to connect to your server in order to get all of the files they need.
Keep in mind that a CDN does cost money, so that's really only something you want to pursue if you're ready for that next level. But it really can help to speed up your website.
Watch the Full Course
You can take this course straight away with a subscription to Envato Elements. For a single low monthly fee, you get access not only to this course, but also to our growing library of over 1,000 video courses and industry-leading eBooks on Envato Tuts+.
Plus you now get unlimited downloads from the huge Envato Elements library of 460,000+ creative assets. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post