This is the fifth day of my participation in Gwen Challenge

preface

A few days ago when I was writing a small tool, I needed to use the code compression tool uglip-js, and suddenly I thought: how to implement this code compression tool? So to understand its principle ~

Abstract Syntax Tree (AST)

To understand the principle of code compression, you must first understand the AST tree, which is the basis of JS code compression.

Abstract syntax tree concepts

AST: Abstract Syntax Tree, translated as Abstract Syntax Tree, its function is to change the Syntax structure of source code into Abstract representation, and expressed in the form of a Tree, each node of the Tree corresponds to the Syntax in the source code [1]. It works by reading the source code as a string and parsing it into a syntax tree according to the syntax of the programming language, such as a sentence like this

    var workTime = 996;
Copy the code

Here we declare a variable workTime and assign it a value of 996. So in the AST abstract syntax tree it can be represented like this

In the figure above, variable names, assignment operators and values are divided into three parts, which simply represent the source code abstracted into a tree. Let’s take a closer look at how this abstract tree is described in JS.

// var workTime = 996;
{
  "type": "VariableDeclaration".// Declaration type
  "declarations": [{"type": "VariableDeclarator"."id": {
        "type": "Identifier".// The type is an identifier
        "name": "workTime" // The identifier name
      },
      "init": {
        "type": "Literal".// The type is a value
        "value": 996./ / the specific value
        "raw": "996"}}]."kind": "var".// Declare the syntax
}
Copy the code

The syntax of the source code is represented as a JSON object, and the syntax tree can be restored to the source code by following certain rules.

The use of AST trees

So what’s the use of turning your source code into an AST abstract syntax tree? It’s useful first of all, as in our topic, for code compression, but also as a compiler, program analysis, and so on.

Code compression

The compression process

We have converted the program source code into an AST tree, so why can be converted into an AST tree code compression? Quote a flowchart of Babel’s transformation

You can see that there are about three steps to code compression:

  1. Convert the source code to AST
  2. AST throughCertain rulesOptimized to convert to a cleaner AST
  3. The optimized AST is converted into code through a generator

Now that you know the basics of compressing code, let’s try it out with Uglip-JS

const uglify = require('uglify-js');
const sourceCode = ` function testFun() { var a = 1; var b = 2; return a + b; } `;
const resultCode = uglify.minify(sourceCode);
console.log(resultCode.code);  // function testFun(){return 3}
Copy the code

As you can see, the source code declares two variables and assigns them values. The function adds the two functions and returns them. The compressed code, because the variable already has an explicit value, removes the code declared by the two variables, and the function returns the sum of the two explicit values.

Compression rules

Now that you know how code compression works, you can see the second step in the compression process:The AST is optimized with certain rules to convert into a more concise AST.

Code compression is done through AST tree optimization, which is done by pressingA certain ruleIn other words, compression rules are a major factor affecting compression quality. For example, the partial compression options for uglip-js are as follows:To learn more about compression rules, clickhere

summary

This article is mainly about JavaScript code compression is how to introduce the concept of AST tree and how it is abstract introduced the principle of JavaScript code compression and UglifyJs compression rules. Hope to help you

If you find this article helpful, you can encourage the author by clicking a “like”, and if you want to learn more about JavaScript or Node, you can click here.

Please point out any inaccuracies or errors in the comments section.

reference

  1. Abstract syntax tree
  2. Walk you through the AST abstract syntax tree
  3. Application of abstract syntax trees in JavaScript