第3期 javascript是如何被压缩的

329 阅读1分钟

压缩方式

去除多余的空格 换行符 注释

function sum(a,b){return a+b}

压缩变量名 函数名 属性名

// 压缩: 缩短变量名
function sum (x, y) {
  return x + y;
}

// 再压缩: 去除空余字符
function s(x,y){return a+b}

合并声明 布尔值简化

// 压缩前
const a = 3;
const b = 4;

!b && !c && !d && !e

// 压缩后
const a = 3, b = 4;

b||c||d||e

AST

AST,抽象语法树,js 代码解析后的最小词法单元。通过AST进行压缩。除此以外AST还有很多其他作用,例如:

eslint: 校验你的代码风格,

babel: 编译代码到 ES 低版本,

taro/mpvue: 各种可以多端运行的小程序框架,

GraphQL: 解析客户端查询

不同的解析器对同一段代码会解析出不一样的AST,例如babel的解析器babelon,uglify的解析器UglifyJS,解析器不同会解析出不一样的AST。

一般压缩代码流程如下,babel、eslint的流程也是如此。

以下是久负盛名的Uglify的压缩过程,webpack内置的压缩功能就是底层以它为基础。

// 原始代码
const code = `const a = 3;`

// 通过 UglifyJS 把代码解析为 AST
const ast = UglifyJS.parse(code);
ast.figure_out_scope();


// 转化为一颗更小的 AST 树
compressor = UglifyJS.Compressor();
ast = ast.transform(compressor);

// 再把 AST 转化为代码
code = ast.print_to_string();

转载自 javascript代码是如何被压缩的