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下判断IE与FF的比较简单的方式
Oct 17 Javascript
jQuery 动态酷效果实现总结
Dec 27 Javascript
Javascript继承(上)——对象构建介绍
Nov 08 Javascript
一个简单的jquery的多选下拉框(自写)
May 05 Javascript
理解js对象继承的N种模式
Jan 25 Javascript
node.js中 stream使用教程
Aug 28 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
Jun 29 Javascript
vue元素实现动画过渡效果
Jul 01 Javascript
JS实现页面打印(整体、局部)
Aug 18 Javascript
JQuery 又谈ajax局部刷新
Nov 27 jQuery
js如何获取图片url的Blob值并预览示例代码
Mar 07 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
Nov 26 Javascript
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
apache+mysql+php+ssl服务器之完全安装攻略
2006/09/05 PHP
Yii框架关联查询with用法分析
2014/12/02 PHP
Yii实现自动加载类地图的方法
2015/04/01 PHP
Yii框架实现的验证码、登录及退出功能示例
2017/05/20 PHP
php二维数组按某个键值排序的实例讲解
2019/02/15 PHP
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
2007/02/23 Javascript
学习YUI.Ext基础第一天
2007/03/10 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
2012/07/20 Javascript
js 高效去除数组重复元素示例代码
2013/12/19 Javascript
Javasipt:操作radio标签详解
2013/12/30 Javascript
js限制input标签中只能输入中文
2015/06/26 Javascript
js图片切换具体实现代码
2016/10/13 Javascript
关于javascript事件响应的基础语法总结(必看篇)
2016/12/26 Javascript
nodejs 十六进制字符串型数据与btye型数据相互转换
2018/07/30 NodeJs
详解vue 在移动端体验上的优化解决方案
2019/05/20 Javascript
nodejs和react实现即时通讯简易聊天室功能
2019/08/21 NodeJs
jquery实现吸顶导航效果
2020/01/08 jQuery
详解小程序横屏方案对比
2020/06/28 Javascript
探索浏览器页面关闭window.close()的使用详解
2020/08/21 Javascript
使用Python生成url短链接的方法
2015/05/04 Python
python实现多线程的两种方式
2016/05/22 Python
Python 由字符串函数名得到对应的函数(实例讲解)
2017/08/10 Python
对Python中range()函数和list的比较
2018/04/19 Python
Python3实现汉语转换为汉语拼音
2019/07/08 Python
python flask 如何修改默认端口号的方法步骤
2019/07/12 Python
numpy库reshape用法详解
2020/04/19 Python
python实现人工蜂群算法
2020/09/18 Python
使用CSS3实现字体颜色渐变的实现
2020/08/10 HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
2019/06/10 HTML / CSS
股权转让协议范本
2014/12/07 职场文书
食堂卫生管理制度
2015/08/04 职场文书
入党申请书怎么写?
2019/06/21 职场文书
导游词之云南丽江古城
2019/09/17 职场文书
如何使用JavaScript策略模式校验表单
2021/04/29 Javascript
使用qt quick-ListView仿微信好友列表和聊天列表的示例代码
2021/06/13 Python
OpenCV实现反阈值二值化
2021/11/17 Java/Android