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

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

Uifyjs是server node.js的压缩程序.有需要的朋友可以测试一下。

丑八怪入门

1、简介

UglifyJS是一个工具集,包括JS解释器,代码最小化,压缩和美化。它是前端开发和打包最常用的工具之一。

CocosCreator引擎使用gulp来管理构建过程,UglifyJS也用于合并和压缩代码。

目前LifyJS只能压缩JS代码,并且只支持ES5语法,还不支持ES6。

2、安装

UglifyJS是基于Node.js开发的,所以首先要确保安装了Node.js环境。

如果要作为独立命令运行,请使用以下命令安装

npm安装丑陋-js -g

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

如果您想通过代码调用它作为一个模块,使用下面的命令来安装它

npm安装uglify-js - save-dev

3、用法

UglifyJS的命令格式如下

输入文件选项

输入文件可以是单个或多个。上传参数时建议先上传文件再上传选项。UglifyJS会把文件放入队列,按照传入的选项依次解释。

例如,有一个名为copy.js的js代码文件,如下所示。

var fs=require(' fs ');

主函数(argv) {

fs.createReadStream(argv[0])。pipe(fs . createwritestream(argv[1]);

}

var args=process . argv . slice(2);

如果(!args args.length===2) {

main(args);

}否则{

console.log('args无效。);

}

现在让我们测试几个常见的丑JS选项。

3.1 -o 输出

uglifyjs copy.js -o min.js

上面的命令被传入copy.js并输出到min.js,结果如下。

var fs=require(' fs ');function main(argv){ fs . create read stream(argv[0])。pipe(fs . createwritestream(argv[1])} var args=process . argv . slice(2);如果(!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 . create read stream(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 copy 2 . 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 argsfs=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,比如:npm安装uglify-js -g G。

最后,不要忘记向环境变量添加node和npm。我的不同之处在于

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

c:\ Users \周涛\ AppData \ Roaming \ npm

现在可以用uglifyjs来压缩,比如

uglifyjs文件夹/dom.js - folder/dom-min.js

会压缩目录文件夹中的dom.js,保存在同一个目录下。

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

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

相关文章阅读

  • 关于js中的全等和不全等,等于和不等于问题的关系,,关于JS中的全等和不全等、等于和不等于问题
  • Vue项目启动,nodejs启动vue项目,如何启动一个Vue.js项目
  • vue双向绑定和单向绑定,vue.js 双向绑定,Vue双向绑定详解
  • vue事件修饰符和按键修饰符,vue事件绑定修饰符都有哪些,Vue.js 事件修饰符的使用教程
  • vue中-model的作用,Vue中的v-model指令的作用是-,vue.js 实现v-model与{{}}指令方法
  • vue2.0双向绑定原理,vue.js 双向绑定
  • vue2.0双向绑定原理,vue.js 双向绑定,深入理解vue.js双向绑定的实现原理
  • vue.js路由跳转,vue-router路由跳转,Vue路由跳转的4种方式小结
  • vue.js打包,vue前端如何打包,详解Vue项目的打包方式
  • vue.js前后端分离,vue前后端分离web项目,Vue之前端体系与前后端分离详解
  • vue.js 遍历数组,vue中遍历数组中的一个对象中的值
  • vue.js 遍历数组,vue中遍历数组中的一个对象中的值,Vue中遍历数组的新方法实例详解
  • seajs教程,seajs还有人用吗,Sea.JS知识总结
  • require的用法js,require.js
  • require的用法js,require.js,教你5分钟学会用requirejs(必看篇)
  • 留言与评论(共有 条评论)
       
    验证码: