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 相关文章推荐
JSON为什么那样红为什么要用json(另有洞天)
Dec 26 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
Sep 19 Javascript
javascript日期验证之输入日期大于等于当前日期
Dec 13 Javascript
浅谈jquery中使用canvas的问题
Oct 10 Javascript
JS获取多维数组中相同键的值实现方法示例
Jan 06 Javascript
vue动态生成dom并且自动绑定事件
Apr 19 Javascript
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
js字符串与Unicode编码互相转换
May 17 Javascript
JavaScript实现换肤功能
Sep 15 Javascript
webpack vue项目开发环境局域网访问方法
Mar 20 Javascript
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
Vue文件配置全局变量的实例
Sep 06 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
PHP开启opcache提升代码性能
2015/04/26 PHP
PHP计算日期相差天数实例分析
2016/02/23 PHP
php实现评论回复删除功能
2017/05/23 PHP
阿里云的WindowsServer2016上部署php+apache
2018/07/17 PHP
Thinkphp5.0 框架的请求方式与响应方式分析
2019/10/14 PHP
JS函数实现动态添加CSS样式表文件
2012/12/15 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
2016/08/24 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
2017/01/19 Javascript
整理关于Bootstrap列表组的慕课笔记
2017/03/29 Javascript
解决Layui数据表格中checkbox位置不居中的方法
2018/08/15 Javascript
Vuex 快速入门(简单易懂)
2018/09/20 Javascript
使用JavaScript解析URL的方法示例
2019/03/01 Javascript
laypage+SpringMVC实现后端分页
2019/07/27 Javascript
Vue2.x-使用防抖以及节流的示例
2021/03/02 Vue.js
python中类的一些方法分析
2014/09/25 Python
Windows上配置Emacs来开发Python及用Python扩展Emacs
2015/11/20 Python
Python3的urllib.parse常用函数小结(urlencode,quote,quote_plus,unquote,unquote_plus等)
2016/09/18 Python
python编程嵌套函数实例代码
2018/02/11 Python
Python3.遍历某文件夹提取特定文件名的实例
2018/04/26 Python
Python机器学习库scikit-learn安装与基本使用教程
2018/06/25 Python
python实现图片彩色转化为素描
2019/01/15 Python
python sort、sort_index方法代码实例
2019/03/28 Python
Python+numpy实现矩阵的行列扩展方式
2019/11/29 Python
python和php学习哪个更有发展
2020/06/17 Python
使用HTML5和CSS3表单验证功能
2017/05/05 HTML / CSS
使用CSS3的font-face字体嵌入样式的方法讲解
2016/05/13 HTML / CSS
意大利奢侈品购物网站:Giglio
2018/01/05 全球购物
马来西亚户外装备商店:PTT Outdoor
2019/07/13 全球购物
代办社保委托书范文
2014/10/06 职场文书
2014年社区个人工作总结
2014/12/02 职场文书
酒店服务员岗位职责
2015/02/09 职场文书
年底个人总结范文
2015/03/10 职场文书
美丽的大脚观后感
2015/06/03 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书
自己搭建resnet18网络并加载torchvision自带权重的操作
2021/05/13 Python