JS压缩工具UglifyJS使用
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` 输入文件是 SpiderMonkeyAST 格式 (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”变量有效。你需要传一个参数来指定此模块的名字，以便浏览器引用。
参考
UglifyJS3-npm英文文档
UglifyJS3中文文档
前端打包工具UglifyJS使用入门
谢谢你阅读到了最后
期待你 点赞、评论、收藏、关注
JS压缩工具UglifyJS使用相关推荐
- css/js压缩工具
css/js压缩工具 http://ajaxmin.codeplex.com/
- ERROR in app.js from UglifyJs RangeError: Maximum call stack size exceeded
在使用webpack中的uglify时报错: ERROR in app.js from UglifyJs RangeError: Maximum call stack size exceeded 看了 ...
- 【解决】ERROR in xxx.js from UglifyJs
当我们运行打包脚本 npm run build 或者打包ios weexpack build ios 有可能会遇到以下报错 ERROR in index.js from UglifyJs  [static/js/xxx.js]
出现问题 使用vue+element-ui+webpack开发项目时,Jenkins构建出现报错error in static/js/xxx.js from UglifyJs Unpected tok ...
- 已解决ERROR in static/js/vendor.4925c830bef16dced0c0.js from UglifyJs Unexpected token: name (i)
在项目打包时报错 ERROR in static/js/vendor.4925c830bef16dced0c0.js from UglifyJs Unexpected token: name (i) ...
- ERROR in static/js/0.6355f688e1657030acc6.js from UglifyJs Unexpected token: punc (() [./~/time-form
ERROR in static/js/0.6355f688e1657030acc6.js from UglifyJs Unexpected token: punc (() [./~/time-form ...
- ERROR in xxx.js from UglifyJs
ERROR in xxx.js from UglifyJs 问题 ERROR in app.bundle.js from UglifyJs Unexpected token: name «elemen ...
- UglifyJs无法压缩vendor.js: ERROR in static/js/vendor.xxx.js from UglifyJs
报错信息: ERROR in static/js/vendor.9d86f97577080abdf83d.js from UglifyJs Unexpected token: name ($vm) [ ...
- vue中引入swiper(4.0+)，打包出错（ ERROR in static/js/4.bafdba9a08bd02fd1c37.js from UglifyJs Unexpected toke）
vue打包报错: ERROR in static/js/4.bafdba9a08bd02fd1c37.js from UglifyJs Unexpected token: name (Dom7) [. ...
最新文章
- 浅谈单片机程序设计中的“分层思想”
- python PyQt5 QSplitter类（可拉伸区域分隔器）
- 调度Java应用程序中的主体
- cad渐开线齿轮轮廓绘制_如何在机械CAD软件中自动生成齿轮
- 小甲鱼python学习笔记之函数（一）
- mac安装xbox驱动
- 北斗卫星导航有哪些频段
- ftp服务器打开文件时浏览器,ftp服务器怎样浏览器打开文件
- 【WPF学习手记】WPF超链接使用
- 用python做生日礼物_地产大佬潘石屹把学习Python当作生日礼物送给自己
- Java制作简易计算器
- TPT又一次重量级更新——TPT16使嵌入式测试变得更加轻松
- js去除字符串的首尾的逗号
- windows 上Miktex的镜像源最新配置方法
- C++Primer第五版——习题答案详解（六）
- 解决Vmware虚拟机下运行Linux电脑发出声音
- 读书笔记---推荐系统实践（3）
- 小巧精致的至爱小播，是你陪睡陪聊的最佳伴侣！
- Java，该学什么？
- app跳转到app store评分界面