How to automatically Minify the Code of you website in Visual Studio Code

Adel Benyahia
3 min readOct 24, 2022

in this tutorial we will use vscode with MinifyAll

javascript minify

What is Minification?

Minification is the process of minimizing code and markup by removing comments and extra spaces, as well as crunch variable names to reduce file size. The minified file version provides the same functionality while reducing the bandwidth of network requests.

Why Minification?

It’s one of the main methods used to reduce load times and bandwidth usage on websites. Minification dramatically improves website speed.

Minification is also beneficial to users accessing the internet through a limited data plan and who would like to save on their bandwidth usage while surfing the web.

Practical Example

a javascript file before minifcation

the same javascript file after minification

As you can see you can not edit these files directly, its unreadable by humans.

So we will have to files, one minified and one normal and let vscode do the hard work for us.

we code normally and vscode will auto minify css and js files for us using MinifyAll extension

How to process

Install and configure MinifyAll

install MinifyAll vscode extension and then configure by checking these options:

Create Index.html

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>VsCode auto minify</title><link rel="stylesheet" href="./style-min.css" /></head><body><h1>Welcome to vsCode auto minify tutorial</h1><p>In this tutorial we will explain to you how to auto minify js and css files with visual studiocode</p><p id="my-paragraph"></p><button id="my-button">Click me</button><script src="./app-min.js"></script></body></html>

Create app.js

const button = document.getElementById("my-button");const paragraph = document.getElementById("my-paragraph");button.addEventListener("click", () => {paragraph.style.backgroundColor = "white";paragraph.innerText = `It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here,content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsumas their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versionshave evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).`;console.log("button clicked");});

Create style.css

body {background-color: antiquewhite;}h1 {font-size: 2rem;color: brown;font-size: 2rem;border-bottom: 2px solid black;}p {font-size: 2rem;color: brown;}button {font-size: 2rem;border-radius: 5px;border: 1px solid black;color: brown;background-color: blanchedalmond;width: 200px;height: 100px;}

I this simple code do, when you click <button> the text and background color of <p id=”my-paragraph”> will change .

when you ever edit app.js or style.js a minified copy will be created automatically

app.js -> app-min.js

style.css -> style-min.css

finally link the minified versions of your js and css files in index.html

in the header:

<link rel="stylesheet" href="./style-min.css" />

in the body:

<script src="./app-min.js"></script>

the complete code in Github:

vscode-auto-minify

--

--

Adel Benyahia

Web application developer (HTML │ CSS │ JS | ReactJS | NextJS | NestJS | MERN)