Javascript代码是如何被压缩的

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

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

compress

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

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

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

mangle

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

1
2
3
4
// 初始化
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

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

Javascript代码是如何被压缩的

https://lvdawei.com/post/how-js-compress/

Author

David Lv

Posted on

2022-02-20

Updated on

2022-04-17

Licensed under