What are the advantages and disadvantages of minifying Javascript scripts?

Question

And which mini-guards can I use?

Answer 1

Upside

The gain is quite obvious, the file gets smaller and loads faster. Some will say it gets harder to read the code and be repurposed, but I don’t think this is a real advantage and there are better techniques.

Downside

There is no disadvantage indeed. Of course if you are still developing need thresh will not use the minified version. The most that can be said is that there is an extra step to make the minification, but this can be automated and it is not enough to be a disadvantage. Some may find other exoteric disadvantages, but we are talking about real situations. Obviously using an aggressive and insecure mini-life is not a good idea so it is very disadvantageous.

It’s really useful?

It is valid for all text files that have redundant characters used only to facilitate human reading. In dynamically generated content does not usually compensate the application of this technique for the time the server will take to minimize each output sent.

This technique can be used together with the data compression technique. Not to confuse the two, minifying is not the same thing as compressing.

Some may wonder if compression is not a much better technique and would even dispense with minification. This is true but not all customers accept compression and then you are left without any technique. Any client who understands web standards well understands the minified file. The gain may not be fabulous but it is important.

Best mini-finishers

Any minificador minimally (I did not miss the opportunity :) ) well done will get a reasonable result, unless it is a very naive and done by those who do not know what they are doing (then you have even bigger problems), will have a good gain. I doubt that there is much difference between the most diverse. Make a real assessment using some of them and see which gives the best result in your case.

I would avoid using a stranger, no one knows if he is reliable. The worst thing you can do is use a mini-feeder that breaks your code.

Some well-tested acquaintances:

• Uglyfy JS
• Closure Compiler
• Jsmin
• MS AJAX Minifier
• Javascript Minifier

Some of these are for CSS as well. Below are some for CSS that can also work with JS.

• Cssmin
• Yuicompressor - is outdated but still good.
• Minifycss
• Csstidy
• Minify
• Csscompressor
• CSSO

And obviously you can minify HTML (when it rarely pays off):

• HTML Compressor
• Minify Code

Test them with your things and see which one does better. Don’t expect big differences.

Answer 2

Speaks beauty? The big and biggest advantage this in data consumption, of course depending on the scenario we do not have big advantages however depending on its application makes a lot of sense.

How so?

Imagine the following scenario we have the following code:

function FuncaoComNomeGrande(parametroComNomeGrande) {
    const VariavelComNomeGrande = "Essa string não vai ser minificada";
    console.log("Essa string não vai ser minificada" + parametroComNomeGrande);
}

FuncaoComNomeGrande("Essa string tambem não vai ser minificada");

This code has 275 characters in bytes of ~278 is different because some characters consume more bits than others for example the C.

This minified code would look more like this:

function f(a){console.log("Essa string não vai ser minificada"+a)}f("Essa string tambem não vai ser minificada")

With 112 characters in bytes becomes 114 ~bytes. Of course in this scenario I used an example forcing a bit the bar defining giant names for variables and functions. In real life there is a great gain but it is not always so high.

Where is the head start in a smaller size?

1. Consumes less internet dealing.
2. Consumes less storage, or is less spent on hosting.
3. It is faster. The lower the data traffic the smaller the packet loss.

A really cool thing about minifying things that can also be a downside Depending on the point of view is that many miniseries once minified will never be able to return to the original version. This is because in the minification process many parts of your code end up disappearing.

There are many mini-finders with different algorithms, all of them use compression algorithms which is a very cool topic to study. I leave a video here which is not in en-br but is one of the coolest I’ve seen on the subject. Below are the most famous ones I know:

• uglify-js
• terser

Minifying them manually can be an inefficient task for this we have packers and task automators like webpack as Gulp.

I hope I helped :D