In this article, we’ll go over the process of minifying your javascript files – why and how it is done. Also, we will cover why it is important to have your JavaScript files Minified
What is JavaScript Minify?
JavaScript is a programming language used to give web pages “live”, i.e. make them interactive and dynamic. Usually, JavaScript is written in .js files and then the HTML for the webpage is loading the script with a <script> tag. The process of loading the JavaScript file consists of downloading the file and then executing it, all done by your browser.
Since the process involves a download of a file, the file size matters as bigger files will take longer to download, in addition, they also consume more bandwidth. As a programming language JavaScript consists of syntax and named variables. This means that the more variables you have – the bigger the JavaScript file to be downloaded gets, in regards to MB.
For example, a file called foo.js can have the following written in it:
let queue = [];
while (!node.isEmpty()) {
let currNode = node.pop();
doAction(currNode);
queue.concat(currNode.children());
}
For demonstrative purposes, we’ll say that this file is 1 MB. So, 1 MB will need to be downloaded and executed.
As much as developers strive to produce readable code (most of, however) machines do not care if you name a variable with a meaningful name or not. As such, if we rename all variables like:
let a = [];
while (!b.isEmpty()) {
let c = b.pop();
z(c);
a.concat(c.children());
}
What we did is to rename all human-made code with variables like a, b, c, etc… This allows the JavaScript file to shrink in size and be downloaded faster. But we can go even further by removing all newline and whitespace characters resulting n:
let a=[];while(!b.isEmpty()){let c=b.pop();z(c);a.concat(c.children());}
This is no way near being readable, however, it is optimized for use in production, live sites as it is way less than the fictional 1 MB used previously. It allows them to use less bandwidth and provide faster downloads for their visitors.
To summarize – minifying JavaScript is for live sites to reduce the bandwidth consumption and speed up the download process of the files.
How to minify JavaScript?
There a lot of online tools that will allow this. The most robust are JavaScript libraries like:
Webpack
Uglify which usually comes with Gulp
Online tools that also allow this for smaller projects
Webpack is the most mature project that allows minifying of JavaScript files, this is the one that we recommend using as such tools can mess up your JavaScript code.
Get a professional hosting and rely on our assistance to help you with JavaScript Minify. Now all shared web hosting services come with 40% OFF the regular price!.
