terser是如何压缩js代码的

js代码压缩整体策略

通过 AST 分析，根据选项配置一些策略，来生成一颗更小体积的 AST 并生成代码。

压缩 AST 的方式

目前前端工程化中使用 terser和 swc进行 JS 代码压缩，他们拥有相同的 API。

常见用以压缩 AST 的几种方案如下:

1. 去除多余字符: 空格，换行及注释

// 压缩前
function sum (a, b) {
  return a + b;
}

// 压缩后
function sum(a,b){return a+b}

2. 压缩变量名：变量名，函数名及属性名

// 压缩前
function sum (first, second) {
  return first + second;  
}

// 压缩后
function sum (x, y) {
  return x + y;  
}

3. 合并声明以及布尔值简化

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

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

4. 编译预计算

数学

// 压缩前
const ONE_YEAR = 365 * 24 * 60 * 60

// 压缩后
const ONE_YAAR = 31536000

函数

// 压缩前
function hello () {
  console.log('hello, world')
}

hello()

// 压缩后
console.log('hello, world')

在 webpack 中开启 js 代码压缩

mode: 'production'

生产环境会自动压缩 js 代码（会自动使用一些插件，如terser-webpack-plugin）

terser-webpack-plugin 内部封装了 terser 库，用于处理 js 的压缩和混淆，通过 webpack plugin 的方式对代码进行处理