Online JS minifier | Minify JavaScript

About the JavaScript minifier tool

Most developers tend to concentrate more on getting things working during software development. As a result, they leave comments, spaces, indents and other formatting strategies that make the code readable by them or their colleagues. These formatting strategies, in turn, consume storage and slow down page load space. Hence, having a JavaScript minifying tool comes in handy to track these formatting strategies and get rid of them without much hassle. 

Therefore, this article will discuss using the Freenerdtools free online JavaScript compressor to minify and compress JavaScript file size online for optimal software performance. 

What is JavaScript?

JavaScript is a text-based, object-oriented and straightforward scripting language. We can use JS in creating interactivities in web applications, ranging from button clicks to scroll and touch animations. It has a nice learning curve. 

What is JavaScript used for?

We can use JavaScript to create interaction on user-facing applications. Also, We can use JS to manipulate data and render them to users dynamically.

How to use Freenerdtools' JS Minifying tool

To minify JavaScript code, we must parse it, compress it, and get an output. Once the JS file is minified, it should appear reasonably unreadable. This is because we have removed all the unwanted white spaces, line and block comments, newline characters, indentations and everything else that makes the code readable.

The freenerdtools JS minifier is a well-crafted, free online JavaScript minification tool. It handles JS minification online without changing the original functionalities of the JS file. Now, let's see how to make proper use of this tool by following the steps below:

Step1: 

Copy and paste the JavaScript source code into the minify online tool text area.

For instance, copy the code below:

  document.addEventListener('DOMContentLoaded', function () {
   var links = document.getElementsByTagName("a");
   var i;
   for (i = 0; i < links.length; i++) {
     if (location.hostname !== links[i].hostname) {
       links[i].rel = "nofollow noopener noreferrer";
       links[i].target = "_blank";
     }
   }
 });

Step2:

Click on the submit button and the minified js code will be generated instantly. For the above snippet, the minified code is shown below:

    document.addEventListener("DOMContentLoaded",(function(){var e,n=document.getElementsByTagName("a");for(e=0;e"nofollow noopener noreferrer",n[e].target="_blank")}));

From the above, we can see that our source code was reduced from about 667 characters to just 455 characters after minification. That is almost 32% less than the source code. As a result, we save up to 32% of web space and increase page load speed.

How to minify JavaScript in VSCode

Visual Studio code, fondly called VSCode, is an open-source code editor that supports various programming languages, JavaScript inclusive. However, in this context, we want to discuss how to minify JS files directly from VSCode. 

Minification in VSCode can achieve by installing the Minify extension. The Minify extension consists of three main parts; 

• the JS minifier 
• the CSS minifier
• the HTML minifier

However, we will concentrate on the JS aspect of the Minify extension. The JavaScript minify tool uses uglify-js library to minify JS files found in our local workspace based on the configurations. For detailed information on how to configure this extension, see here

Importance of JavaScript minification

JavaScript minimization is an underrated concept for performance improvements and web page optimizations. Here we will point out some importance of practicing JavaScript file minification as it concerns performance optimization. They include:

• It will reduce the size of JavaScript files
• It reduces unnecessary characters, whitespace, comments, newlines and formatting techniques
• It improves page SEO and performance
• It improves the page load time and speed of a website.
• It saves bandwidth

Disadvantages of Minifying JavaScript

Disadvantages of JavaScript minify may include the following:

• Loss of JS scripts functionality
• Since it makes scripts difficult to read, it can decrease the rate of debugging by collaborators
• It makes it impossible for codes to be reusable, especially by a third party
• It makes the code hard to understand for both the author

How to unminify JavaScript

As developers, we always want a way out of places or situations in case of errors or unwanted circumstances. Therefore, the issue of JavaScript minimisation won't be an exception. There are several ways to unminify minimised codes, but the most commonly used practice is the Unminify Tool. All we need to do is copy the minified code and paste it into the text area provided. Also, there are ways to unminify JS in Visual Studio code, one of which is using the prettier extension found in the extensions panel.