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 相关文章推荐
ie6下png图片背景不透明的解决办法使用js实现
Jan 11 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
Jul 01 Javascript
jquery delay()介绍及使用指南
Sep 02 Javascript
javascript中Number对象的toString()方法分析
Dec 20 Javascript
JS+CSS实现的经典tab选项卡效果代码
Sep 16 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
Aug 11 Javascript
javascript实现日期三级联动下拉框选择菜单
Dec 03 Javascript
Vue.js实现价格计算器功能
Mar 30 Javascript
JS实现判断图片是否加载完成的方法分析
Jul 31 Javascript
js核心基础之构造函数constructor用法实例分析
May 11 Javascript
vue中使用vee-validator完成表单校验方案
Nov 01 Javascript
浅谈 JavaScript 沙箱Sandbox
Nov 02 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中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
php使用递归计算文件夹大小
2014/12/24 PHP
php实现给二维数组中所有一维数组添加值的方法
2017/02/04 PHP
php获取目录下所有文件及目录(多种方法)(推荐)
2019/05/14 PHP
JavaScript 学习点滴记录
2009/04/24 Javascript
jQuery.ajax 用户登录验证代码
2010/10/29 Javascript
javascript 学习笔记(八)javascript对象
2011/04/12 Javascript
一些实用的jQuery代码片段收集
2011/07/12 Javascript
什么是Node.js?Node.js详细介绍
2014/06/01 Javascript
简单总结JavaScript中的String字符串类型
2016/05/26 Javascript
JS实现十字坐标跟随鼠标效果
2017/12/25 Javascript
javascript代码优化的8点总结
2018/01/29 Javascript
vue中的面包屑导航组件实例代码
2019/07/01 Javascript
详解微信小程序轨迹回放实现及遇到的坑
2021/02/02 Javascript
Python网络爬虫项目:内容提取器的定义
2016/10/25 Python
Python3中条件控制、循环与函数的简易教程
2017/11/21 Python
Python多进程并发与多线程并发编程实例总结
2018/02/08 Python
python面向对象多线程爬虫爬取搜狐页面的实例代码
2018/05/31 Python
解决Mac安装scrapy失败的问题
2018/06/13 Python
Pandas统计重复的列里面的值方法
2019/01/30 Python
CentOS7下安装python3.6.8的教程详解
2020/01/03 Python
解决tensorflow由于未初始化变量而导致的错误问题
2020/01/06 Python
html5用video标签流式加载的实现
2020/05/20 HTML / CSS
阿联酋航空丹麦官方网站:Emirates DK
2019/08/25 全球购物
Carrs Silver官网:英国著名的银器品牌
2020/08/29 全球购物
网友共享的几个面试题关于Java和Unix等方面的
2016/09/08 面试题
会计应届生的自荐信
2013/12/13 职场文书
自我鉴定三原则
2014/01/13 职场文书
小学学雷锋活动总结
2014/04/25 职场文书
工作建议书范文
2014/05/13 职场文书
乡镇党委书记个人整改措施
2014/09/15 职场文书
婚前财产协议书范本
2014/10/19 职场文书
入党个人总结范文
2015/03/02 职场文书
乡镇保密工作承诺书
2015/05/04 职场文书
2016元旦主持人开场白
2015/12/03 职场文书
创业计划书之酒吧
2019/12/02 职场文书