压缩方式
去除多余的空格 换行符 注释
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();