What are the advantages and disadvantages of minifying Javascript scripts?


Viewed 3,688 times


And which mini-guards can I use?

2 answers



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.


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:

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

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

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

  • reduces the size, but the time the browser will have to interpret (depending on the amount of js files a site loads), does not increase either, or be minified or is not irrelevant when it comes to the JS interpreter?

  • 1

    The minification will not affect this, in fact there may even be a derisory gain because it has fewer characters for parse. The decompression would already produce a overhad but it would compensate. After all several files used in web development are compressed by default. And even this extra cost is small close to gain. Compression on the server could generate an extra cost that does not pay, so it is not very recommended to compress dynamic content (static compresses once and not every time it is requested). Note that extra cost on server is dangerous, on client only if it is something absurd.

  • @bigown using Uglifyjs: https://github.com/mishoo/UglifyJS would be great gain for my application?

  • 1

    Now I understand the question added that you had put, you didn’t want to know about frameworks It’s about mini-finishers. I’m going to rewrite to put this back but without asking for an opinion. I edited the answer to include this information. But I won’t give my opinion about him. I know he’s good, but I wouldn’t categorically say he’s the best.

  • @bigown thanks for the return

  • @bigown looked like the list of mini-guards you went through were bad, because you just talked about the ones who break the code... The.o

  • @Kaduamaral improved?

  • I don’t know I’m just speculating, I already gave the vote. The explanation was good, but this part is kind of strange: um minificador que quebra seu código. Alguns conhecidos... :S Just put "Known Minimakers" and I think it’s great rsrsrs...

Show 3 more comments


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:

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

Browser other questions tagged

You are not signed in. Login or sign up in order to post.