Javascript代码是如何被压缩的
通常我们用到的打包工具如 webpack,会在打包的时候将源代码合并在一个文件中,并且压缩成一行,去掉能去掉的空格、换行。合并代码这一步,是由 webpack 框架完成。压缩代码则是借助第三方混淆压缩代码库 terser 完成。
terser 的压缩分两步,压缩(compress)和混淆(mangle)。compress 负责去掉空格,将能合在一起的表达式合在一起。mangle 负责缩短变量的长度,又叫混淆。主要流程是构造 ast,遍历 ast,根据配置转换 ast。
compress
compress代码看这里 lib/minify.js🔗
1 | // 初始化 |
Compressor构造函数看这里 lib/compress/index.js🔗
mangle
mangle 代码看这里 lib/minify.js🔗
1 | // 初始化 |
find candidates to mangle
transform the tree, renaming properties
生成全局唯一的变量名
mangle将长变量名通过 base54算法 lib/scope.js 缩短为全局唯一的短变量名。自增id,nth_identifier.get(++cname)🔗 根据自增id生成全局唯一短key替换掉原先的key,生成方法见 lib/scope.js
1 | console.log(base54.get(0))//a |
Javascript代码是如何被压缩的