Up next in 10
How to Compress & Minify HTML,CSS & JS Files For Production in VS Code Using Minify Extension
Jan 9, 2025
How to Compress & Minify HTML,CSS & JS Files For Production in VS Code Using Minify Extension
View Video Transcript
0:00
uh hello guys in this video I will
0:02
actually show you a visual studio
0:05
extension which allows you to compress
0:08
or Minify your HTML CSS and JavaScript
0:12
files so if you are actually developing
0:15
a project and if you want to deploy this
0:17
inside production so generally you will
0:20
Minify your code so that it takes less
0:23
less space so for that you don't need
0:26
any third party Library you can do it
0:29
inside your vs code using an extension
0:31
called as minii so for installing that
0:34
extension you need to go to the
0:36
extensions tab right here and just type
0:39
miny in the search bar so just type m i
0:42
n i
0:44
FY so the very first extension which
0:47
comes in the search result this is
0:49
actually the
0:50
extension it has got almost I already
0:53
installed it let me uninstall
0:56
it so if you're going to the extensions
1:00
tab right here just type here
1:04
Minify so it has got
1:07
57,000 downloads it's a very popular
1:10
extension so simply click on the install
1:13
button it will install it globally so
1:16
you can just
1:19
see it actually minifies compresses your
1:23
HTML CSS and
1:27
JavaScript so after installing it
1:31
globally this is my simple application
1:34
example I'm taking a random password
1:36
generator that I developed inside HTML
1:38
CSS and JavaScript it's a very simple
1:40
application which runs in the browser so
1:43
there it has got two buttons generate
1:45
password if you click on this button a
1:47
random password will be generated the
1:49
second button is copy to clipboard so
1:51
once you click this button your password
1:53
will be copied so it's
1:55
straightforward simple web application
1:57
so this is actually the code required
1:59
here you can see 70 lines of code so now
2:02
while if you want to deploy this you
2:05
need to Minify this remove the white
2:08
space Minify all this code to a
2:11
compressed version
2:13
so for doing this this is actually a
2:17
single file index.html if you want see
2:20
so now if you want to Minify this simply
2:22
press the shortcut key on your keyboard
2:25
if you're in Windows control shift p to
2:27
actually use that extension and just
2:30
search for the mini file just type mini
2:33
file and you will actually see this
2:35
option will
2:38
appear so just select whichever file
2:42
that you want to
2:44
Minify and just see on the left hand
2:46
side after I select this option of Min
2:51
f a new file will be created uh index.
2:55
min.
2:56
HTML you can see a new file has been
2:59
created
3:00
if I open this file you will actually
3:02
see uh all the white space has been
3:05
trimmed and you can see the HTML CSS and
3:08
the JavaScript code has been minified
3:12
so let me also show the size difference
3:15
as well if I show you in the file
3:18
explorer uh this was 3 kilobyte the
3:22
unminified version was 3 kilobyte the
3:24
minified version is 2 kilobyte so we are
3:27
actually saving some space while on
3:30
production so it's a very small
3:31
application but you can just see the
3:34
scope of this so it is always a great
3:37
practice to actually Minify your code
3:39
before you deploy this so now the same
3:41
application will work here if you see
3:43
this is the minified
3:45
version so the minified version will be
3:50
run faster because it is taking less
3:52
space and also if you want to deploy
3:54
your
3:56
applications the hosting space is very
3:59
much low so it is good practice to
4:02
Minify your code so let's suppose if you
4:06
are actually storing your code into
4:09
individual
4:13
files you are not writing your code in a
4:17
single file let's suppose you are
4:19
referencing multiple
4:22
files so the CSS code is located in the
4:25
style. CSS file and this JavaScript code
4:29
is located in a different
4:35
file so we are just referencing these
4:38
files this also will
4:42
work so now it contains three different
4:45
files which containing this code so we
4:48
are
4:49
actually splitted our application into
4:51
three files this is actually the HTML
4:53
part this is the CSS part this is the
4:56
JavaScript part so I will simp past the
5:00
JavaScript code right here this is now
5:02
the unminified version so if I run this
5:05
application still it will
5:08
work you can see still it is working now
5:11
we have three different files to Minify
5:13
so one by one we can Minify them so
5:16
first of all we will tackle the CSS part
5:19
again same process you just need to say
5:22
control shift p and simply select Minify
5:25
and now it will create a minified file
5:27
for this CSS style. . CSS if you open
5:31
this this is your minified CSS file same
5:35
goes with the
5:36
JavaScript select your mini file so in
5:39
this
5:44
way you need to Simply select this
5:46
option uh
5:57
mini and then same goes with with this
6:00
file as
6:06
well can see it has created
6:21
this I think it is saying that mini
6:25
failed preserve line is not a supported
6:28
option
6:37
you can just see it is working for CSS
6:39
it is also working for HTML as well uh
6:42
but for JavaScript it is showing this
6:44
error Reserve option is uh if I show you
6:48
basically just type
6:54
here preserve line is not a supported
6:57
option
7:00
you can take help here uh of chat GPT
7:04
here
7:13
just Minify plugin
7:17
for minifying uh JS it is giving
7:27
me preserve line is not your
7:47
option so it is actually telling you
7:54
to you need to paste this user settings
7:59
so just open your user settings files
8:02
for different plugins inside vs
8:07
code this is the Json file which you can
8:09
change as settings for each and every
8:11
plug-in
8:45
so now you can see after doing this now
8:47
it is perfectly working script. main.js
8:50
it has minified this you will see that
8:52
just go to your uh user settings
8:56
file just paste this simple uh
9:00
uh
9:02
uh just type here minify. GS acma 5
9:06
mangle to
9:08
true and then for the minified
9:11
compatibility level two optimization
9:14
level so you can just change all these
9:16
settings it is also available in the
9:18
extensions if you open this extension
9:21
tab if you read the documentation all
9:23
these options are supported mangle true
9:27
compress you can change all these
9:29
properties right here just uh in the
9:32
output as
9:33
well how to you can each change each and
9:37
every property of this mini
9:41
file so the default settings is okay you
9:44
just need to for this to work you need
9:47
to paste
9:48
it so now all the minified files are
9:52
there so now you can
9:56
simply instead of including this style.
9:59
CSS you can simply include the minified
10:02
one so style. main.css and here also
10:06
script
10:09
Dot
10:12
main.js and here once again we can miny
10:25
this so it has created this file you can
10:28
see that now now we can simply open this
10:32
application the application still works
10:35
and you can just see so we actually
10:38
showed you the how to Minify HTML CSS
10:41
and JavaScript files right inside your
10:43
vs code using this small little
10:45
extension which can uh compress and
10:48
Minify HTML CSS and JavaScript
10:52
files and you don't need any third party
10:55
library for this you can do it right
10:58
inside your vs Cod so this was a
11:00
tutorial guys thank you very much for
11:02
watching this please hit that like
11:03
button subscribe the channel for more
11:05
videos like this and I will be seeing
11:07
you in the next one
#Development Tools
#Other
#Software Utilities