Principle of JavaScript code compression tool

JavaScript code compression refers to the reduction of the code size and improving the loading speed of web pages by performing a series of optimization processing on the code. The principle of JavaScript code compression includes removing useless characters such as spaces, comments, unnecessary line breaks, etc. in the code, compressing variable names, compressing function names, etc., and converting some common operations (such as +, -, *, /) into shorter operators (such as @, ^, #, |).

Javascript code compression can usually be divided into the following steps:

• Remove useless characters such as spaces, comments, unnecessary line breaks, etc. in the code.
• Compress variable names, replace long variable names with short variable names, and ensure that they do not conflict with other variable names.
• Compress function name, change the function name to a short name.
• Convert some common operations (such as +, -, *, /) into shorter operators (such as @, ^, #, |).
• Some code optimizations that improve performance. For example: use comma operations to match and assign values ​​multiple times, convert smaller integers into binary, etc.

Below I will explain the compression process of javascript code through two examples:

Sample test code 1:

function add(a, b) { 
  return a + b; 
}

(add(2, 3));

• Code after removing useless characters:

function add(a,b){return a+b;}(add(2,3));

• Compressed variable name:

function a(b,c){return b+c;}(a(2,3));

• Compression function name:

function a(b,c){return b+c;}(a(2,3));

• Compression operator:

function a(b,c){return b+c;}(a(2,3));

After the above 4 steps, the original 5 lines of code are compressed into a line of code "function a(b,c){return b+c;}(a(2,3));", achieving the effect of saving space and improving code loading speed.

Sample test code 2:

var list = [1, 2, 3, 4, 5];
(function(item) {
  (item);
});

Code after removing useless characters:

var list=[1,2,3,4,5];(function(item){(item);});

Compressed variable name:

var a=[1,2,3,4,5];(function(b){(b);});

Compression function name:

var a=[1,2,3,4,5];(function(b){(b);});

Compression operator:

var a=[1,2,3,4,5];(function(b){(b);});

This code is also compressed into a line, as "var a=[1,2,3,4,5];(function(b){(b);});". We can see that this compressed code is simpler and smaller than the uncompressed code, suitable for use in front-end pages, making the code more efficient and easy to load.

This is the end of this article about the principles of javascript code compression tools. For more related javascript code compression principles, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!