How to Minify (Compress) JavaScript Code

To compress or minify a code means removing all the irrelevant characters from your source code without changing its functionality. These characters include white spaces, comments, new line characters, semicolons etc. But why is minimization of your code necessary? Well, it reduces the size to lesser kilobytes. Hence, making the loading of your website faster and providing the user an amazing experience.

Various developers write well structured code with spaces and comments. This makes their code understandable. But, at the same time it creates extra space and hence increases the load time.

This is why minimization of code is extremely useful in JavaScript as it reduces the size of the page. This minimized version provides better functionality without any additional network traffic.

How is JavaScript code Minimized

JavaScript code can be minimized through various ways as listed below:

• Through the removal of white spaces and indentation
• Through the removal of extra characters from variable name
• Through the removal of new line characters
• Through the removal of unnecessary if, loops and variable decelerations
• Through optimizing your conditional statements and converting arrays into objects.
• Through the removal of comments
• Through the removal of unnecessary parentheses, semi-colons.

Here’s an example of JavaScript before and after minimization:

Before the code is of 8 lines:

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/09/echo/image2-24.png" data-lazy- height="768" src="data:image/svg xml,” width=”1366″>

After, those 8 lines are minimized to a single line code:

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/09/echo/image2-24.png" data-lazy- height="768" src="data:image/svg xml,” width=”1366″>

This is done through the removal of white spaces, extra comments; it will make it more optimized and speed up web page loading. But sometimes a user code consists of thousands lines and minifying it isn’t an easy task. That’s why there are various libraries and online tools that provide these functionalities.

Online Tools to Minify your JavaScript Code:

Minification has become common in website designs and development. That’s why there are various tools that help you compress your code and save your precious time. Some of these are listed below:

Jscompress

This is a compression tool specifically for JavaScript, where users can upload multiple files at a time. This helps in saving the time of the user as well as combining all the files into a single code file an easier process. Hence, increasing the loading time of the page and making the website experience for the user better.

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/09/echo/image3-22.png" data-lazy- height="768" src="data:image/svg xml,” width=”1366″>

Javascript-minifier

This particular tool minifies both JavaScript and CSS. It’s easy to use, as users just have to paste their JavaScript code in the given box and click on the “Minify” button. This generates a minified version of your code that can also be downloaded as a file.

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/09/echo/image5-16.png" data-lazy- height="768" src="data:image/svg xml,” width=”1366″>

Minifycode 

This tool offers minifiers for HTML, CSS and JavaScript. It’s similar to other minifiers where users just have to paste code and generate the minified version. But, it comes with an additional feature. It has a “Butifier” button that uncompress the minified code, making it easier to read for the user.

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/09/echo/image4-20.png" data-lazy- height="768" src="data:image/svg xml,” width=”1366″>

Google Closure Compiler

It’s an easy to use Google Closure Compiler that comes with various helpful optimization options. Various options are provided, whichever user wants to use according to their need. For example, if a user wants to optimize their code for whitespaces only or checking the syntax of their code. Furthermore, it also checks for any errors in the code, providing the user with best results.

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/09/echo/image1-24.png" data-lazy- height="768" src="data:image/svg xml,” width=”1366″>

Conclusion

Minification of code refers to the removal of things that have no use in your code. This could include extra spaces, semi colons etc. It’s a useful practice and helps in the prevention of your source code being copied. In this article we saw why minimization of your code is necessary and various tools out there for this purpose. These tools provide users with various options to optimize their code on the bases of various factors such as speed, efficiency etc.

The minimized version of your code will help in increasing the loading time of your webpage and decreasing the network traffic. Hence providing both the visitor and search engines better experience.