JS压缩工具UglifyJS使用
- 简介
- 使用
- UglifyJS的命令格式如下
- uglifyjs的options
- 参考
简介
UglifyJS是个包含JS解释器、代码最小化、压缩、美化的工具集，是前端开发打包的最常用工具之一。
uglify-js目前只能压缩JS代码，且只支持到ES5语法，尚不支持ES6。有ES6语法会报错
uglify-es在上面基础上,可以压缩es6语法,不过不会转为es5语法
使用
使用效果,打包后的js,没有注释内容,没有空格且合并到一行,简化了函数参数和变量名
- 新建一个文件夹,包含要压缩的demo.js文件
- 通过
yarn init初始化package.json文件 - 通过
yarn add uglify-es命令添加uglify-es依赖 - 修改
package.json文件里的scripts
{
"name": "uglifyjs-test",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"build": "uglifyjs demo.js --compress --mangle --output demo.min.js"
// 表示通过uglify-js或者uglify-es依赖将demo.js按照压缩、混淆去打包,输出文件名为demo.min.js
},
"dependencies": {
"uglify-es": "^3.3.9"
}
}- 命令行输入
yarn build时会执行uglifyjs demo.js --compress --mangle --output demo.min.js脚本命令
表示使用uglify-es将demo.js文件(支持多个文件)按压缩、混淆去去打包,打包后的文件名为demo.min.js
UglifyJS的命令格式如下
uglifyjs [input files] [options]uglifyjs的options
-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”变量有效。
你需要传一个参数来指定此模块的名字，以便浏览器引用。谢谢你阅读到了最后期待你 点赞、评论、收藏、关注
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
