Why minify JavaScript code?

What is minification in JavaScript?

Minification, also known as minimization, is the process of removing all unnecessary characters from JavaScript source code without altering its functionality. This includes the removal of whitespace, comments, and semicolons, along with the use of shorter variable names and functions. Minification of JavaScript code results in compact file size.

For example, here is a block of code before and after minification:

Before minification: eight lines of code

After minification: A single line of code

Minification speeds up webpage loading, thereby improving website experience, making both visitors and search engines happy.

How is minification different from obfuscation, compression, encryption, or uglification?

• Uglification: This essentially the same as minification. Uglify JS is a JavaScript library for minifying JavaScript files. To 'uglify' a JavaScript file is to minify it using Uglify. Uglification improves performance while reducing readability.
• Encryption: This is the process of translating data, called plain data, into encoded data. This encrypted, or encoded, data is known as ciphertext, and needs a secret key in order to decrypt it. The browser cannot execute encrypted code. Encryption is a security feature, and does not necessarily reduce the size of a file.
• Obfuscation: This process is employed in order to hide business logic. The code is modified such that it becomes unreadable by humans. This makes reverse engineering difficult. Obfuscation is different from encryption in that computers are still able to understand and execute the code. Obfuscation is accomplished by changing the names of variables, functions, and members. The resulting reduction in file size also improves performance, though this is not the primary goal of obfuscation.
• Compression: Data compression is a process that reduces the number of bits needed to represent data. Data compression can free up valuable space on hard drives, speed up file transfer, and decrease costs for network bandwidth. Some files, like Microsoft Word files, may be compressed to 90 percent of their original size.

Why don’t developers write minified code to begin with?

Minification results in compact files, which makes it a web performance best practice. So, why not write code that is already minified?

JavaScript code is written for, and by, humans, who need whitespace, formatting, and comments to be able to understand and debug the code. After the code is written, minifying software can be used in order to improve performance. This is because browsers can execute code without needing to understand it.

What are the disadvantages of minification?

Minification can break complicated scripts because of site-dependent variables like themes, plugins, and server environment. Also, minification must be done in conjunction with other performance tuning. On its own, it might not provide significant gains. Minification can also introduce errors that are hard to debug.

Despite these disadvantages, minification is usually worth attempting for potential performance gains. Learn how to minify CSS as well.