“This is the fourth day of my participation in the First Challenge 2022. For details: First Challenge 2022”

UglifyJS uses some interesting tricks to compress your code to the hilt, including syntax you’ve probably never heard of.

Substitution variable name

let randomNumber = Math.random();
let randomNumber1 = Math.random();
console.log(randomNumber, randomNumber1);

/ / after the compression
var n=Math.random(),o=Math.random();console.log(n,o)
Copy the code

This is the most basic, no matter how long your variable name is, it will give you a single character n, O,p,q….. If you run out of individual letters, n1, O1

Execute function immediately

(function (){console.log(1)}) ()/ / after the compression
!function (){console.log(1)} ()Copy the code

I started with the first, but Uglify replaced it with the second (shorter, of course). Actually parentheses and! The function of the symbol is to convert the part of the funtion into an expression, not a declaration. This can be done immediately, as can ~ and +.

The difference of a character should also be optimized, it is insane

The function is preceded by the & comma operator

Function foo (){} is placed at the top of the module. Of course, this is a specification, but it turns out that it also serves another purpose: to facilitate code merging later on. For example, let’s define it like this:

var self=this;
function a(){console.log(1); } self.a=a;function b(){console.log(2); } self.b=b; a() b()return self;

/ / after the compression
var n=this;
function o(){console.log(1)}
function t(){console.log(2)}
return n.a=o,n.b=t,o(),t(),n
Copy the code

Note that the final n is not omitted. Return will take the result of the last expression.

The comma operator returns the result of the subsequent execution. For details, see the Rule of 20: Advanced use of the comma operator in JavaScript

Boolean value for

Can use! 0 instead of true, use! 1 instead of false, is the code shorter?

It’s a wonderful skill

console.log(true);
console.log(false);

/ / after the compression
console.log(!0),console.log(!1);
Copy the code

Comma operators are everywhere

if

Return the front:

So my antiderivative might look something like this. When compressed, it looks like this:

function load() {
    if (t) {
        x = false;
        log("error");
        return;
    }
    console.log("22")}/ / after the compression
function load(){if(t)return x=!1.void log("error");console.log("22")}
Copy the code

Return is ahead of time, followed by void. Why is that? Without braces, the four pieces of code for if become one sentence. The purpose of void here is to erase the return value of the function. Because the original if didn’t return a value. If the log method has a return value at this point. So I call load and I get this value back. This is intrusive, and it defeats the purpose of the original function. So I erased it with void.

A short circuit

function foo() {
    if(! x) {return;
    }
    console.log("doA");
    console.log("doB");
}

/ / after the compression
function foo(){x&&(console.log("doA"),console.log("doB"))}
Copy the code

That’s good. In the same way:

if(x&&y){
 doa();
 dob(); 
}
 doc();  

-->    x&&y&&(doa(),dob()),doc()
Copy the code

Four lines became one line of code.

In order to merge a row, that’s ok, right?

console.log("doA");
console.log("doB");
if (x>0) {
	console.log("true");
}

// after compression, merge like this
if (console.log("doA"), console.log("doB"), x > 0) console.log("true");
Copy the code

I don’t think it’s very nice to write this, but the point is that in an if statement, the last sentence is an assertion. Combine that with the previous return. You must be familiar with comma statements.

Throw didn’t let it go

if (errMsg) {
    util.triggerCallback(fail, "Model validation error");
    throw Error(errMsg);
}

// Compressed like this
if(errMsg)throw util.triggerCallback(fail,"Model validation error"),Error(errMsg);
Copy the code

Switch the order of the statements and think of throw as return.

ecstasy

if else

Will be replaced by the triple expression A, right? B: C, basic optimization.

if(a) {
    console.log(1);
} else {
    console.log(2);
}

/ / after the compression
a?console.log(1) :console.log(2);
Copy the code

Digital processing

Hundreds and thousands are processed into scientific counts.

For example, 1000 –> 1E3.

while

var offset = 0;
while (true) {
    if (offset >= bufferLength) {
        break; }}// Will be replaced by this
for(var offset=0;;)if(offset>=bufferLength)break;
Copy the code

Ok, that’s a line saved

The above is just a guide to what you find interesting, but it can also be used by developers to string together the code. Of course, it is not desirable to write all the code in one line, which is less readable, and it may not be so hard to look at the compressed code next time.