uglifyjs 前端打包压缩工具
2020-07-04 本文已影响0人
mcgee0731
1、简介
UglifyJS是前端开发打包的最常用工具之一，是个包含JS解释器、代码最小化、压缩、美化的工具集。
特点
- uglify-js@3 的API 和 CLI已简化，不再向后兼容 uglify-js@2.
- uglify-js 只支持 ECMAScript 5 (ES5).假如希望压缩 ES2015+ (ES6+)代码，应该使用 uglify-es这个npm 包。
- UglifyJS目前只能压缩JS代码.
2、安装
UglifyJS基于Node.js开发，所以首先确保安装了Node.js环境。
如果想以一个独立命令的方式运行，则使用以下命令安装
npm install uglify-js -g
npm install uglify-js@2.1.0 -g
uglifyjs -V
3. 使用
uglifyjs [input files] [options]
UglifyJS可以输入多文件。建议你先写输入文件，再传选项。
UglifyJS会根据压缩选项，把文件放在队列中依次解释。所有文件都会在同一个全局域中，假如一个文件中的变量、方法被另一文件引用，UglifyJS会合理地匹配。
假如没有指定文件，UglifyJS会读取输入字符串（STDIN）。
如果你想要把选项写在文件名的前面，那要在二者之前加上双横线，防止文件名被当成了选项：
uglifyjs --compress --mangle -- input.js
CLI
-h, --help 列出使用指南。
`--help options` 获取可用选项的详情。
-V, --version 打印版本号。
-p, --parse <options> 指定解析器配置选项:
`acorn` 使用 Acorn 来解析。
`bare_returns` 允许在函数外return。
在压缩CommonJS模块或`.user.js `引擎调用被同步执行函数包裹的用户脚本 时会用到。
`expression` 不是解析文件，二是解析一段表达式 (例如解析JSON).
`spidermonkey` 输入文件是 SpiderMonkey
AST 格式 (JSON).
-c, --compress [options] 启用压缩（true/false）/指定压缩配置:
`pure_funcs` 传一个函数名的列表，当这些函数返回值没被利用时，该函数会被安全移除。
-m, --mangle [options] 启用混淆（true/false）/指定混淆配置:
`reserved` 不被混淆的名字列表。
--mangle-props [options] 混淆属性/指定压缩配置:
`builtins` 混淆那些与标准JS全局变量重复的名字。
`debug` 添加debug前缀和后缀。
`domprops` 混淆那些鱼DOM属性名重复的名字。
`keep_quoted` 只混淆没括起来的属性名。
`regex` 只混淆匹配（该正则）的名字。
`reserved` 不需要混淆的名字的列表（即保留）。
-b, --beautify [options] 是否美化输出（true/false）/指定输出配置：
`beautify` 默认是启用.
`preamble` 预设的输出文件头部。你可以插入一段注释，比如版权信息。它不会被解析，但sourcemap会因此调整。
`quote_style` 括号类型:
0 - auto自动
1 - single单引号
2 - double双引号
3 - original跟随原码
`wrap_iife` 把立即执行函数括起来。注意：你或许应禁用压缩配置中的`negate_iife`选项。
-o, --output <file> 输出文件路径 (默认 STDOUT). 指定 `ast` 或
`spidermonkey`的话分别是输出UglifyJS或SpiderMonkey AST。
--comments [filter] 保留版权注释。默认像Google Closure那样，保留包含"@license"或"@preserve"这样JSDoc风格的注释。你可以传以下的参数：
- "all" 保留全部注释
- 一个合适的正则，如 `/foo/` 或 `/^!/`，保留匹配到的注释。
注意，在启用压缩时，因为死代码被移除或压缩声明为一行，并非*所有*的注释都会被保留。
--config-file <file> 从此JSON文件读取 `minify()` 配置。
-d, --define <expr>[=value] 定义全局变量。
--ie8 支持IE8。
等同于在`minify()`的`compress`、 `mangle` 和 `output`配置设置`ie8: true`。UglifyJS不会默认兼容IE8。
--keep-fnames 不要混淆、干掉的函数的名字。当代码依赖Function.prototype.name时有用。
--name-cache <file> 用来保存混淆map的文件。
--self 把UglifyJS本身也构建成一个依赖包
(等同于`--wrap UglifyJS`)
--source-map [options] 启用 source map（true/false）/指定sourcemap配置:
`base` 根路径，用于计算输入文件的相对路径。
`content` 输入sourcemap。假如的你要编译的JS是另外的源码编译出来的。
假如该sourcemap包含在js内，请指定"inline"。
`filename` 输出文件的名字或位置。
`includeSources` 如果你要在sourcemap中加上源文件的内容作sourcesContent属性，就传这个参数吧。
`root` 此路径中的源码编译后会产生sourcemap.
`url` 如果指定此值，会添加sourcemap相对路径在`//#sourceMappingURL`中。
--timings 在STDERR显示操作运行时间。
--toplevel 压缩/混淆在最高作用域中声明的变量名。
--verbose 打印诊断信息。
--warn 打印警告信息。
--wrap <name> 把所有代码包裹在一个大函数中。让“exports”和“global”变量有效。
你需要传一个参数来指定此模块的名字，以便浏览器引用。
3.1 -o 输出
uglifyjs copy.js -o min.js
上面命令传入 copy.js，输出到 min.js，结果如下
var fs=require("fs");function main(argv){fs.createReadStream(argv[0]).pipe(fs.createWriteStream(argv[1]))}var args=process.argv.slice(2);if(!!args&&args.length===2){main(args)}
可以看到，效果是代码去空格且合并到一行，但函数和变量名都不变。
3.2 -c 压缩
uglifyjs copy.js -c -o min.js
上面命令传入 copy.js，压缩输出到 min.js，结果如下。
var fs=require("fs");function main(argv){fs.createReadStream(argv[0]).pipe(fs.createWriteStream(argv[1]))}var args=process.argv.slice(2);args&&2===args.length&&main(args);
和上一命令的效果基本相同，但把 if语句简化了。
3.3 -m 混淆
uglifyjs copy.js -m -c -o min.js
上面命令传入 copy.js，混淆+压缩输出到 min.js，结果如下。
var fs=require("fs");function main(r){fs.createReadStream(r[0]).pipe(fs.createWriteStream(r[1]))}var args=process.argv.slice(2);args&&2===args.length&&main(args);
可以看到，混淆+压缩的效果，就是在前面基础上，把函数参数用最简字母代替了。整体说来，UglifyJS的混淆比较轻量，只是简化了函数参数和变量名，而不会修改语法树。
3.4 输入多文件
uglifyjs copy.js copy2.js -m -c -o min.js
上面命令传入 copy.js、 copy2.js，混淆+压缩输出到 min.js，结果如下。
var fs=require("fs");function main(e){fs.createReadStream(e[0]).pipe(fs.createWriteStream(e[1]))}(args=process.argv.slice(2))&&2===args.length&&main(args);var args;fs=require("fs");function main(e){fs.createReadStream(e[0]).pipe(fs.createWriteStream(e[1]))}(args=process.argv.slice(2))&&2===args.length&&main(args);
可以看到，效果就是在前面基础上，把多个输入文件顺序合并到同一行了，同时对变量重复命名做了规避。
