How to reduce Javascript files’ size (to make pages load faster.)

1 second… 2 seconds…. 3 seconds… 4 seconds…… if your website takes more than 5 seconds to load, voila, now your visitor is gone.

—————–
Table of content:
—————–

– Site loading time.
– So, what is that Javascript minification thing?
— Ever heard of JQuery?
— In English, please.
-* Meme break
– But, can we revert it back into a normal Javascript code?
-** BONUS: Javascript ????????????.
– Final words.

Site loading time.

Especially with big projects, this one is important,

Would you stay waiting 10 seconds for a website to load?!.. I obviously wouldn’t. Therefore, Javascript minification is a topic you should know some information about.

So, what is that JavaScript minification thing?

Say we have a javascript function, and we– for some reason –called it “HelloPlanet”:

function HelloPlanet(planet){
    if (planet == "Pluto"){
        console.log("Pluto is not a planet")
    } else {
        console.log("Nice to meet you, You are from Planet " + planet)
    }
}
HelloPlanet("Pluto");

In this case the output would be:

Pluto is not a planet

Now, say we minified our Javascript code with a javascript-minification site, e.g.: [https://javascript-minifier.com](or a similar website), our code would become:

function HelloPlanet(o){"Pluto"==o?console.log("Pluto is not a planet"):console.log("Nice to meet you, You are from Planet"+o)}HelloPlanet("Pluto");

And in this case the output would become:

Pluto is not a planet

See the difference now, Right? All unnecessary spaces and line breaks were removed.

although this doesn’t seem like a big of a deal, but with a truly big javascript file this will definitely make difference, let me demonstrate this more clearly by giving an example.

Ever heard of JQuery?

JQuery is a well-known JavaScript library, and is often used to make Javascript development take much less time by the use of pre-defined functions.

A normal problem with a project like this would be the big size, so what they used to solve this problem was Javascript minification.

Let’s compare the minified version of JQuery’s size vs. the normal version’s:

From my OWN ARCH SYSTEM

In English, please.

Sorry for talking in Linux, what I mean is:

jquery-3.6.0.js (Normal, unminified)’s Size is 282K (Exactly 288580 Bytes.)

jquery-3.6.0.min.js (Minified version)’s Size is 88K (Exactly 89501 Bytes.)

And therefore the difference would be:

288580 Bytes – 89501 Bytes = 199079 Bytes ~= About 200K In Size

And for loading a page that would take about 2 seconds (if the connection is somewhat slow.)


Meme break!

Now let’s take a break and read a very funny Javascript meme…; (I meant to use a semi-colon)

Don’t find it funny?! I don’t get why wouldn’t you, but it’s your opinion. you can put all your complains in (your own) complain box here.


But, can we revert it back into a normal javascript code?

I would recommend you keep a copy of your original code before minifing, but since everything is possible, you can use a site like JSNice [http://jsnice.org]

Bonus: JavaScript obfuscation.

Ever wanted to make your Javascript code more unreadable? I think you can consider Javascript obfuscation, a topic I will write about soon, but until then you can try it out with [https://www.obfuscator.io](not sponsored, actually no link here is sponsored), also search about it to learn more.


And As Someone Great Once Said:

Stay Tuned

-Me

~ViloDium

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s