Uglifyjs(JS代码优化工具)入门 安装使用


Posted in Javascript onApril 13, 2020

UglifyJS使用入门

1、简介

UglifyJS是个包含JS解释器、代码最小化、压缩、美化的工具集,是前端开发打包的最常用工具之一。
CocosCreator引擎采用gulp管理构建流程,其中也使用UglifyJS来做代码的合并和压缩。

UglifyJS目前只能压缩JS代码,且只支持到ES5语法,尚不支持ES6。

2、安装

UglifyJS基于Node.js开发,所以首先确保安装了Node.js环境。
如果想以一个独立命令的方式运行,则使用以下命令安装

npm install uglify-js -g

安装完成后,输入 uglifyjs-V 查看版本号,检测安装是否成功。

如果想作为一个模块通过代码调用,则使用以下命令安装

npm install uglify-js --save-dev

3、用法

UglifyJS的命令格式如下

uglifyjs [input files] [options]

输入文件既可以是单个,也可以是多个,建议传参时先传文件,再传选项。UglifyJS会根据传入选项,把文件放在队列中依次解释。

例如,有一个名为 copy.js的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);
} else {
  console.log('args is invalid.');
}

我们现在来测试UglifyJS的几个常用选项。

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);

可以看到,效果就是在前面基础上,把多个输入文件顺序合并到同一行了,同时对变量重复命名做了规避。

下面是其他网友的补充

需要先安装node,进入命令行,查看node,npm是否正确安装。

Uglifyjs(JS代码优化工具)入门 安装使用

 

接下来安装UglifyJS,命令如:npm install uglify-js -g

Uglifyjs(JS代码优化工具)入门 安装使用

 

最后别忘了把node和npm添加到环境变量中,我的分别是

C:\Program Files (x86)\nodejs\;

C:\Users\taozhou\AppData\Roaming\npm;

Uglifyjs(JS代码优化工具)入门 安装使用

现在就可以使用uglifyjs就行压缩了,如

uglifyjs folder/dom.js -> folder/dom-min.js

会把目录folder下dom.js压缩,保存在同一个目录下。

详细参数参考: https://github.com/mishoo/UglifyJS

Javascript 相关文章推荐
Javascript 构造函数详解
Oct 22 Javascript
简单谈谈Javascript中类型的判断
Oct 19 Javascript
javascript图片滑动效果实现
Jan 28 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
Nov 30 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
Jan 23 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
Sep 27 Javascript
JS事件绑定的常用方式实例总结
Mar 02 Javascript
js实现继承的方法及优缺点总结
May 08 Javascript
微信小程序文章详情功能完整实例
Jun 03 Javascript
一分钟学会JavaScript中的try-catch
Dec 14 Javascript
关于vue中如何监听数组变化
Apr 28 Vue.js
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
node.js 一个简单的页面输出实现代码
Mar 07 #Javascript
服务器端的JavaScript脚本 Node.js 使用入门
Mar 07 #Javascript
JavaScript高级程序设计 读书笔记之十一 内置对象Global
Mar 07 #Javascript
拥抱模块化的JavaScript
Mar 07 #Javascript
那些年,我还在学习jquery 学习笔记
Mar 05 #Javascript
什么是DOM(Document Object Model)文档对象模型
Mar 05 #Javascript
JQuery魔力之$("tagName")与selector
Mar 05 #Javascript
You might like
PHP 和 MySQL 开发的 8 个技巧
2007/01/02 PHP
MySQL数据源表结构图示
2008/06/05 PHP
php 广告调用类代码(支持Flash调用)
2011/08/11 PHP
php可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
将PHP从5.3.28升级到5.3.29时Nginx出现502错误
2015/05/09 PHP
WordPress中邮件的一些修改和自定义技巧
2015/12/15 PHP
php读取XML的常见方法实例总结
2017/04/25 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
ExtJS自定义主题(theme)样式详解
2013/11/18 Javascript
js获取域名的方法
2015/01/27 Javascript
js控制div弹出层实现方法
2015/05/11 Javascript
AngularJS 输入验证详解及实例代码
2016/07/28 Javascript
vue中用动态组件实现选项卡切换效果
2017/03/25 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
浅谈Node.js爬虫之网页请求模块
2018/01/11 Javascript
深入理解ES6之数据解构的用法
2018/01/13 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
2018/12/06 jQuery
Vue.js 中的实用工具方法【推荐】
2019/07/04 Javascript
微信小程序云函数添加数据到数据库的方法
2020/03/04 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
2020/09/04 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
2020/11/24 Javascript
关于uniApp editor微信滑动问题
2021/01/15 Javascript
[04:47]DOTA2-潍坊风行电子俱乐部探秘
2014/08/08 DOTA
python2.7 mayavi 安装图文教程(推荐)
2017/06/22 Python
python opencv之SURF算法示例
2018/02/24 Python
python 3.7.0 下pillow安装方法
2018/08/27 Python
Python解决线性代数问题之矩阵的初等变换方法
2018/12/12 Python
Python基于smtplib模块发送邮件代码实例
2020/05/29 Python
python合并多个excel文件的示例
2020/09/23 Python
.NET里面什么时候需要调用垃圾回收
2015/06/01 面试题
中学生爱国演讲稿
2013/12/31 职场文书
遥感技术与仪器求职信
2014/02/22 职场文书
医院领导班子四风对照检查材料
2014/09/27 职场文书
健康状况证明模板
2014/10/23 职场文书
2019新员工心得体会
2019/06/25 职场文书