JavaScirpt Tutorial Index

JavaScript Tutorial Javascript Example Javascript comment Javascript Variable Javascript Data Types Javascript Operators Javascript If Else Javascript Switch Statement Javascript loop JavaScript Function Javascript Object JavaScript Arrays Javascript String Javascript Date Javascript Math Javascript Number Javascript Dialog Box Javascript Window Object Javascript Document Object Javascript Event Javascript Cookies Javascript getElementByID Javascript Forms Validation Javascript Email Validation Javascript Password Validation Javascript Re-Password Validation Javascript Page Redirect Javascript Print How to Print a Page Using JavaScript Textbox events in JavaScript How to find the largest number contained in a JavaScript Array?

Misc

JavaScript P5.js JavaScript Minify JavaScript redirect URL with parameters Javascript Redirect Button JavaScript Ternary Operator JavaScript radio button checked value JavaScript moment date difference Javascript input maxlength JavaScript focus on input Javascript Find Object In Array JavaScript dropdown onchange JavaScript Console log Multiple variables JavaScript Time Picker Demo JavaScript Image resize before upload Functional Programming in JavaScript JavaScript SetTimeout() JavaScript SetInterval() Callback and Callback Hell in JavaScript Array to String in JavaScript Synchronous and Asynchronous in JavaScript Compare two Arrays in JavaScript Encapsulation in JavaScript File Type Validation while Uploading Using JavaScript or jquery Convert ASCII Code to Character in JavaScript Count Character in string in JavaScript Get First Element of Array in JavaScript How to convert array to set in JavaScript How to get current date and time in JavaScript How to Remove Special Characters from a String in JavaScript Number Validation in JavaScript Remove Substring from String in JavaScript

Interview Questions

JavaScript Interview Questions JavaScript Beautifier Practice Javascript Online Object in JavaScript JavaScript Count HTML Interpreter Getters and Setters in JavaScript Throw New Error in JavaScript XOR in JavaScript Callbacks and Promises in JavaScript Atob in JavaScript Binary in JavaScript Palindrome Number in JavaScript How to Get First Character Of A String In JavaScript How to Get Image Data in JavaScript How to get URL in JavaScript JavaScript GroupBy Methods difference-between-var-let-and-const-keyword-in-java-script

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.