Minification (also known as Minimization) is a process of minimizing code and markup in the web pages and script files, without altering their functionality. It helps in reducing the load times and bandwidth usage on websites. Minification helps improve site speed and accessibility which impacts the user experience of the website making it better.

Why Minify?

While coding developers tend to use spacing, comments, and well-named variables to make code and markup readable themselves. Though these practices help in keeping the code manageable, maintainable, and well documented; these are unnecessary characters for machines for execution/compilation/etc. These characters usually include white space characters, new line characters, comments, and sometimes block delimiters. Minification reduces the size of the source code, making its transmission over a network (e.g. the Internet) more efficient.

Minification vs Compression

Minified source code can be interpreted immediately without the need for uncompression, i.e. the interpreter can work with both the original as well as with the minified source. However, compressed source code needs to be uncompressed for compilation/interpretation or needs a special interpreter for it to be executed.

Minification vs Obfuscation

Obfuscation is a process employed to hide business logic such that it becomes unreadable by humans. This is done so that reverse engineering becomes difficult. To achieve its goals, minification sometimes uses techniques also used by obfuscation; for example, shortening variable names and refactoring the source code. However, the prime goal of Minification is not to hide the business logic or make the code unreadable.

Minification & Uglification

This is 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.

Things to consider while Minifying

• Minification can break complicated scripts because of site-dependent variables like themes, plugins, and server environment

• Minification must be done in conjunction with other performance tunings. On its own, it might not provide significant gains.

• Minification can also introduce errors that are hard to debug

History of Minification

• In 2001 Douglas Crockford introduced JSMin which removed comments and whitespace from JavaScript code

• It was followed by YUI Compressor in 2007

• In 2009, Google opened up its Closure toolkit, including Closure Compiler which contained a source mapping feature together with a Firefox extension called Closure Inspector

• In 2010, Mihai Bazon introduced UglifyJS

• UglifyJS was superseded by UglifyJS2 in 2012; the rewrite was to allow for source map support

• In 2017, Alex Lam took over maintenance and development of UglifyJS2, replacing it with UglifyJS3 which unified the CLI with the API

Minification and CDN

Minification has an important role to play in front end optimization (FEO). However, performing and managing minification is a challenging task. Manual minification is a bad practice and virtually impossible where large files are concerned.

A content delivery network (CDN) provides automated minification, where one keeps the original, uncompressed files on the main server, while the CDN automatically stores minified variants on its caching servers and PoPs — keeping them in sync with source modifications.

References

• Minification Wiki

• Code minification

• Minification- Imperva

• Why minify JavaScript code?