HTML Minification Using VSCode

What is Minification?

Minification is the process of reducing file size by removing extra spaces, comments and crunching longer variable names. In development phase, often developers write comments, give meaningful variable names and spaces for readability and maintainability. However, when serving to end user, these things are not needed and can be avoided.

Need For Minification

Remember, everything comes in bits and bytes. Avoiding code comments, spaces and smaller variable names means you are avoiding extra bytes to transmit to your end user. Even if we can reduce size by 10kb. For a million visitors, it means 10 gigabytes of bandwidth savings. This reduces your server costs, improves site loading speed and gives end user a better experience. Do you still needs to be convinced about the need for HTML Minification?!

HTML code Minification can be achieved in multiple ways. In this article, let us use VSCode Extension to achieve it.

How To

Search for "Minifyall" extension in visualcode as shown in screenshot below.

Install the extension and wait for it to complete.

Open your HTML code that you want to minify and press "ctrl + alt + n" keys together. This will invoke the extension and create a minified html file. If file name is "index.html", a new file with name "index-min.html" will be created as shown.

That's it!! We are done with HTML Code Minification using VSCode Extension. There are many other extensions but we chose "minifyall" extension to demonstrate.