Minify JS

We often come across sluggish code snippets while developing small or large projects and the readability is greatly affected. Also, there are various instances that the code can be shortened easily but due to the availability of the space, developers tend to utilize that vacant space not realizing that it can be optimized. This problem still prevails mostly to newbie because they can't write effective industrial-level code. To deal with such an issue, we use various tools one of which is minification. In this article, we would be learning more about it. Let's get started.

Minification can be defined as the process of removing all the unnecessary characters or instances in the source code. It can though vary from language to language without having to change the functionality.

Importance

Minification of not only JavaScript is considered important but its subordinates like HTML and CSS that go hand in hand are important to be minified because we can save our valuable time while loading a page. Minification enhances the application launching and code processing faster than the usual format of clumsy code. We aren't talking about shortening the loading speed in half or so but when it comes to the website that is being used to cover quick responses, minification turns out to be very important. It is important to note that users find it absurd when the site loads and not only first-time visitors are disturbed with but it also reduces the page ranking in the browser affecting the overall nature.

Therefore, the term "minify" in programming lingo is used to define the process of removing useless characters including white spaces, eliminators of a block, comments, and line breaks which might seem good in terms of beautification but is not generally useful for machines since they are all converted into binary and these unnecessary characters do have some ASCII value which blocks memory space. This is why page loading speed is affected due to the useless processing of these characters.

To make it visually effective, let's get started by installing the minify through the steps covered in the installation process below.

Installation

Minification is a middleware, so the dependencies we are going to need are to install it in the Node.js environment since we are dealing with JavaScript. To install minify on our local system, type the given command.

How to use?

The CLI command given below creates a code snippet saved as hello.js. We just need to copy and paste it including the EOT at the end of the line and enter.

 $ cat << EOT > hello.js
const hello = 'world';

for (let i = 0; i < hello.length; i++) {
    console.log(hello[i]);
}
EOT

Now, we need to make use of the minify command followed by adding the path to the name of the JavaScript that is intended to be minified. Ultimately, the code will be minified and the output will be generated on the screen.

 $ minify hello.js
const hello="world";for(let l=0;l<hello.length;l++)console.log(hello[l]);

The code now appears to be segregated into a single line. Thus, the output that will be generated is shown below.

Let's take another example to understand how the process of minification works in JavaScript.

Minify is although a full-fledged tool that can be used as promise in JavaScript. Below example demonstrates one such example.

 const minify = require('minify');
const options = {
    html: {
        removeAttributeQuotes: false,
        removeOptionalTags: false,
    },
};

minify('./client.js', options)
    .then(console.log)
    .catch(console.error);

Another instance where minification can be done is by using async-await and try-to-catch methods. See the below snippet for reference.

 import minify from 'minify';
import tryToCatch from 'try-to-catch';
const options = {
    html: {
        removeAttributeQuotes: false,
        removeOptionalTags: false,
    },
};

const [error, data] = await tryToCatch(minify, './client.js', options);

if (error)
    return console.error(error.message);

Although we have talked about the above code snippets which are quite difficult to implement, yet there is plenty of option online. To be precise, there are online JavaScript minifying tools that deal with the removal of unwanted sluggish characters.

In the above snippets, we tried to make you familiar with the package that is over by NPM and is solely intended to cover all the aspects of minification through the command line.

Options

The option object can accept differences configurations, not only JavaScript but also HTML and CSS.

 const options = {
    html: {
        removeAttributeQuotes: false,
    },
    css: {
        compatibility: '*',
    },
    js: {
        ecma: 5,
    },
    img: {
        maxSize: 4096,
    },
};

Minification examples in JavaScript

Let's take into consideration some examples through which we can easily visualize how minification works. In the previous code snippet, we have discussed the backend methods of how minification is framed into our system through the command line. Let's visualize this using plenty of websites that serve the same functionality of shortening or minifying the JavaScript.

Example 1: Sum of numbers

 let naturalSum=function(number)
{
if(number<=0){
return 0;
}
else{
return number+naturalSum(number-1);
}
}
//  console.log(naturalSum(10));
document.write(naturalSum(10));

Minified Output

 let naturalSum=function(u){return 
u<=0?0:u+naturalSum(u1)};document.write(naturalSum(10));

Example 2: Fibonacci

 var a=0,b=1,fibValue=0;
let fibnocci=function(number)//function
{
if(number>0)//base function
{
fibValue=a+b;
a=b;
b=fibValue;
document.write(" "+fibValue);
fibnocci(number-1);
}
}
document.write(a+" "+b+" ");
fibnocci(5);//(number-2) because already 2 numbers taken as a and b

Minified Output

  var a=0,b=1,fibValue=0;let 
fibnocci=function(i){i>0&&(fibValue=a+b,a=b,b=fibValue,
document.write(" "+fibValue),fibnocci(i-1))};document.write(a+" "+b+" 
"),fibnocci(5);

CDN Perspective

From the CDN point of view, minification can be termed as a major component that is aimed to achieve front-end optimization (FEO). It can be called a set of tools and techniques that gradually reduces the associated web page request followed by reducing the size of the file.

However, minification can sometimes be cumbersome while performing and managing different files. Manual minification is usually considered bad practice if the file size is too large or the source code is having a huge codebase. As far as the automated tools are concerned, it can be easily handled by copy-pasting the assigned code snippet and it gets automatically minified no matter how huge the code base is. Although, automated tools might sometimes make it challenging since we might be forced to keep different development files and production files separately. Also, keeping them synced is highly cumbersome.

The problem can be tackled through the content delivery network (CDN). An automated minification using CDN would not require overhead to minify different files. It would rather pick it up automatically from the original or uncompressed files from the main server. It would also sync the minified variant cache files generated from minification. One such CDN used these days is the Imperva CDN. It automatically compresses complex JavaScript files stored on its server to reduce the loading time. It is done without having to need any configuration from the user end and is automatically managed to save time protecting the original files along with compressed or minified files. Another advantage of using CDN in minification is the security from major attacks like DDoS or phishing.

Pros and Cons of Minification

Pros

Minification of JavaScript can reduce the page loading time.
Enhance the overall performance of the web application or website.
Raises a bar in the page rank on the internet.
Promotes faster execution of requests and responses.
Develops a faster approach to gain momentum of certain actions needed in the web application or website.

Cons

Code can look sometimes sluggish or unreadable.
Removal or special characters or space may confuse the developer.
Cache files cannot be handled properly.
Syntax acquisition might seem less constraint.
Unreadability of minified code is enhanced.

Conclusion

In this article, we learned in depth about minification. It is not just confined to JavaScript but can also be used in closed integration with HTML and CSS since JavaScript. Therefore, minification can be termed as a process of minimizing code, markup, and markdown from our website or web application's pages and script files. It is one of the most efficient methods to deal with the time and bandwidth usage of websites that rely upon delivering performance. Minification gradually improves any website's accessibility speed thereby directly translating into a better experience for the end-users. It is beneficial for users to access the content on the web with a limited data plan and for those who like to save their bandwidth while surfing the web.

Moreover, we came across the fact that while creating JavaScript files, developers seemingly tend to make use of excessive spacing and comments to make the debugging easier even without knowing that the project or product they are building can face performance issues. They also tend to keep crunch variable names that make the code base occupy more space than usual. It later puts them into issues in the production phase because it might seem a good idea when a project in the development phase is readable and well commented. But when it comes to serving pages in production issues are not raised out of concern nor are they left out with production benefits. This is why we use minify method to deal with such huge problems.

Next TopicHow to Calculate volume of an object

← prev next →