Minify JavaScript

What do you mean by the term ‘Minification’?

The technique of minification reduces the amount of code and markup in your websites and scripting files. It's one of the most used techniques for reducing website load times and bandwidth utilization. Minification increases the speed and accessibility of a website, resulting in a better user experience. It's also useful for consumers who are viewing your website via a restricted data plan and want to reduce their bandwidth use while surfing the web.

What is JavaScript minification?

The practice of deleting all extraneous characters from JavaScript source code without affecting its functionality is known as minification. The usage of shorter variable names and functions, as well as the removal of whitespace, comments, and semicolons, are all examples of this. The compression of JavaScript code results in smaller file size.

Why is it necessary to minify JavaScript (JS)?

To make code and markup readable for themselves, developers employ spacing, comments, and well-named variables when generating HTML, CSS, and JavaScript (JS) files. It also aids anyone who may work on the assets in the future. While this is advantageous during development, it is disadvantageous when it comes to serving your pages. Web servers and browsers can analyze file information without comments and well-structured code, but both of these methods generate extra network traffic for no reason.

Example

//This function takes in name as a parameter
//and logs a string which greets that name
// using the passed information
function greet(name){
	console.log(“Hello”+name+”,Welcome to JavaTPoint”)
}
greet(Daniel);

After Minification

function greet(o){console.log(“Hello”+0+”,Welcome to JavaTPoint”)}greet(Daniel);

For page optimization, minification has become common practice. For production deployments, all major JavaScript library authors (bootstrap, JQuery, AngularJS, and so on) provide minified versions of their files, which are commonly identified by a min.js name extension.

What is the difference between minification, obfuscation, compression, encryption, and uglification?

Uglification is similar to minification in that it reduces the size of a file. Uglify JS is a JavaScript library that simplifies the process of minifying JavaScript scripts. To 'uglify' a JavaScript file, use Uglify to minify it. Uglification boosts productivity but lowers readability.

Encryption is the process of converting data, often known as plain data, into encoded data. This encrypted or encoded material is called ciphertext, and it requires a secret key to decrypt it. Encrypted code cannot be executed by the browser. Encryption is a security feature that does not always result in smaller file size.

Obfuscation: This technique is used to conceal business logic. Humans are unable to interpret the code since it has been altered. Reverse engineering becomes tough as a result of this. Obfuscation differs from encryption in that the code is still understandable and executable by computers. Change the names of variables, functions, and members to obfuscate the code. Although this is not the primary purpose of obfuscation, the subsequent reduction in file size increases performance.

Data compression is a method of reducing the number of bits required to represent data. Data compression can help you save space on your hard drive, speed up file transfers, and lower your network bandwidth expenditures. Microsoft Word files, for example, can be reduced to 90 percent of their original size.

Is it true that JavaScript code that has been minified improves performance?

Minifying increases the overall performance of your page by reducing the load time, even if it is just a little. For the great majority of JavaScript code, neither minifying nor obfuscating has any discernible effect on execution time. Even more, savings can be achieved by combining numerous scripts, such as jQuery and its plug-in. Minifying might provide a visible impact on restricted devices and/or with very big codebases, as previously stated.

Techniques and Tools for Minification

The Closure Compiler, a Google JavaScript optimization tool, makes a more efficient copy of any JavaScript file. When a developer modifies a JavaScript file, the Closure Compiler is used to minify the code. The new file is uploaded to the webserver and made available to users via their web browser.

What are some of the drawbacks of minification?

Because of site-dependent factors like themes, plugins, and server environment, minification might disrupt sophisticated scripts. Minification must also be done in combination with other speed optimization techniques. It might not deliver considerable benefits on its own. Minification can potentially lead to difficult-to-trace problems.

Example

let naturalSum=function(number)
{
if(number<=0){
return 0;
}
else{
return number+naturalSum(number-1);
}
}
//  console.log(naturalSum(10));//display the output in browser console
document.write(naturalSum(10));//display the output in the browser directly as like html page

After Minification

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

Minification is a simple and quick approach to minimize the number of resources used by a web application. Even when using normal compression techniques, minification can reduce the amount of time it takes to produce a page by more than 60%. Minifying your website can result in significant speed improvements without sacrificing the user experience.