Javascript代码是如何被压缩的

通常我们用到的打包工具如 webpack，会在打包的时候将源代码合并在一个文件中，并且压缩成一行，去掉能去掉的空格、换行。合并代码这一步，是由 webpack 框架完成。压缩代码则是借助第三方混淆压缩代码库 terser 完成。

terser 的压缩分两步，压缩（compress）和混淆（mangle）。compress 负责去掉空格，将能合在一起的表达式合在一起。mangle 负责缩短变量的长度，又叫混淆。主要流程是构造 ast，遍历 ast，根据配置转换 ast。

compress

compress代码看这里 lib/minify.js🔗

// 初始化
toplevel = new Compressor(options.compress, {
    mangle_options: options.mangle
}).compress(toplevel);

Compressor构造函数看这里 lib/compress/index.js🔗

mangle

mangle 代码看这里 lib/minify.js🔗

// 初始化
if (options.mangle && options.mangle.properties) {
    toplevel = mangle_properties(toplevel, options.mangle.properties);
}

1. find candidates to mangle
2. transform the tree, renaming properties

生成全局唯一的变量名

mangle将长变量名通过 base54算法 lib/scope.js 缩短为全局唯一的短变量名。自增id，nth_identifier.get(++cname)🔗 根据自增id生成全局唯一短key替换掉原先的key，生成方法见 lib/scope.js

console.log(base54.get(0))//a
console.log(base54.get(1))//b
console.log(base54.get(200))//Mc
console.log(base54.get(3000))//E0