uglifyjs 压缩js代码使用指南
UglifyJS--javascript代码压缩使用指南{转}
在线测试地址 http://lisperator.net/uglifyjs/
下面都是基于linux系统的安装使用.
UglifyJS是遵循了CommonJS规范写成的,可以在支持CommonJS模块系统的javascript环境中运行。当然,这是官方的说法,通俗的说,就是可以在浏览器里和node.js的环境中兼可运行了。
UglifyJS的作者在今年9月份的时候,开始了UglifyJS2的项目,作者本人也是比较推崇UglifyJS2,因此,本文就只是关于UglifyJS2的一些介绍。下文中所有的UglifyJS都是指代UglifyJS2。
UglifyJS其实不仅仅是个js的压缩工具,同时可以对代码进行最小化,和美化的工具包。
担心篇幅太长,在这里只做关于node.js环境下使用UglifyJS的介绍。
1. 安装:
—— 从npm安装
npm install uglify-js
—— 从github安装
git clone git://github.com/mishoo/UglifyJS2.git cd UglifyJS2 npm link .
2. 概述:
在控制台/命令行中输入uglifyjs –help,如果出来帮助信息,表明uglifyjs可以正确使用了。
uglifyjs [input files] [options]
举个栗子:
// 有个叫main.js的待压缩/美化的文件 uglifyjs main.js -o main-min.js -c
uglifyjs的作者建议的就是先把文件放在前面,再把一些压缩/美化的参数跟在后边。
一些常用的参数列表
-o,--output 指定输出文件,默认情况下为命令行 -b,--beautify 美化代码格式的参数 -m,--mangle 改变变量名称(ex:在一些例如YUI Compressor压缩完的代码后你可以看到 a,b,c,d,e,f之类的变量,加了-m参数,uglifyjs也可以做到,默认情况下,是不会改变变量名称的) -r,--reserved 保留的变量名称,不需要被-m参数改变变量名的 -c,--compress OK,主角登场了,这是让uglifyjs进行代码压缩的参数。可以在-c后边添加 一些具体的参数来控制压缩的特性,下文中会具体介绍。 --comments 用来控制注释的代码的
3. 变量名压缩
你需要传入-m来进行变量名的压缩(将一系列很长的变量名压缩为a,b,c,d,e,f云云)。当使用了-m参数进行改变变量名时,如果还想保留一些变量名让他们不被改变,就需要用–reserved (-r) 。例如
uglifyjs ... -m -r '$,require,exports'
4. 进行压缩的选项
当使用了–compress (-c) 参数时,就启用了uglifyjs对代码的压缩的功能。你可以在-c后边传入一系列逗号分开的选项来指定压缩的具体特性。
对于这些选项使用的方法,可以参考下文中的“代码美化选项”部分。
(巴拉巴拉巴拉,此处省去一千字就不做具体的介绍了。总而言之,你可以让uglifyjs可选的除去你在代码中留下的debugger的等等关键字,或是各种变态的注释等等,一般用户这里忽略了,如真有特殊需求,可以自己翻阅文档。)
4.1 预编译选项
你可以使用–define (-d)来定义一些给uglifyjs压缩/美化代码的时候使用的变量,此话怎讲呢?说着玄乎,其实举个例子就能明白了。为了调试代码,你可以在你的代码中加入如下的示例
if (DEBUG) {console.log("debug stuff"); }
当然,在最后发布的时候。普通的码农呢,会勤勤恳恳的一个个把这样的调试代码给删除掉,但是万一工程过于庞大,溜掉了一两个也是无可厚非的。聪明的码农呢,就会用到了uglifyjs中的-m这个选项了。
首先要保证的就是DEBUG不是一个本地的变量,再使用如下命令
uglifyjs -o main-min.js main.js -c --define DEBUG=true
得到的main-min.js文件中,上边的调试代码就不见了。是不是很cool?
还有种使用预编译选项的方式,就是把预编译的所有选项放到一个js文件中。例如,有个define文件,有如下内容
const DEBUG = false; const PRODUCTION = true; // etc.
注:必须要使用const来声明需要预编译的变量。
用如下的方式编译你的代码
uglifyjs build/defines.js js/foo.js js/bar.js... -c
最终起到的效果和上面是一样的。
5. 代码美化选项
从博主的个人角度来讲,觉着这个有必要学习下,代码规范在什么时候都是一个码农离不开的话题。为了保证在一个大型项目中,你的代码具有良好的可读性,可以由jsdoc之类的工具生成一份具体的文档供别人阅读是很有重要的。
uglifyjs提供的代码美化的选项比较有限,就算是代码压缩功能的一个附属小功能吧。
这里需要强调下的是,美化中的所有选项,是对-b参数而言的,就是说在使用的时候,这些选项需要放在-b后边,例如:
beautify 进行代码的美化,默认的情况下等于-b beautify=true,你也可以吧beautfy设置为false跳过 美化步骤。 indent-level 设置代码缩进,例如github默认的情况下缩进是2个tab,默认的数值为4,例如 (uglifyjs -o main-min.js main.js -b "indent-level=2") indent-start 对代码进行整体缩进默认值为0,可以这么使用 (uglifyjs -o main-min.js main.js -b "indent-start=4,indent-level=8") quote-keys 默认为false。如果设置为true,则将所有对象中的键用引号引起来 space-colon 会在一个单引号后边插入一个空格 ascii-only 转义Unicode字符 inline-script 转义js代码字符串变量中的script标签 width 设置代码的宽度,默认情况下是80
5.1 保留copyright字样或者是其他的一些注释
默认的情况下uglifyjs只会保留符合jsdoc规范的注释。
你可以在–comments后面加上一串正则表达式,来匹配出你需要保留的注释,例如–comments ‘/foo|bar/’。
如果在–comments后加了个all,则保留了所有的注释。
uglifyjs 压缩js代码使用指南相关推荐
- 如何使用js压缩html代码,使用uglifyjs压缩JS
背景介绍 ====== 大家有没有去看过jquery-1.8.3.min.js文件中的代码? 如果有看过你会发现变量名都是a, b , c啥的.且所有的代码没有空格一大长串.这时可能你会疑惑, 为何会 ...
- uglifyjs压缩JS
首先,去http://nodejs.org 下载安装.我下的版本是0.8.14.安装很简单,下一步 需要先安装node,进入命令行,查看node,npm是否正确安装. 接下来安装UglifyJS,命令 ...
- 用uglifyjs压缩JS js压缩 混淆
原文 小tip:我是如何初体验uglifyjs压缩JS的 这篇对之前那边进行稍微一点修改 js的压缩 并不是网上那种混淆 网上那种压缩混淆没什么卵用.分分钟给弄回来 也是逗死我了 只是一些简单的 ...
- 使用uglifyjs压缩JS
安装node.js 安装当前应用 -- uglifyjs 如何安装node.js就不再介绍了, 百度一下一大把.安装uglifyjs如下: npm install uglify-js -g image ...
- React多页面应用5(webpack生产环境配置,包括压缩js代码,图片转码等)
本教程总共7篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1.React多页面应用1(webpack开发环境搭建,包括Babel.热更新等) ----2017 ...
- uglifyjs压缩js文件(指令压缩/ 批量压缩/ 编程方式压缩)
一.指令压缩 1.安装node,npm--详细见nodejs安装与使用入门 2.安装 uglifyjs--npm install -g uglify-js 3.压缩例子:1)uglifyjs mai ...
- uglifyjs压缩js文件
UglifyJS 是一个服务端node.js的压缩程序,用来压缩js文件 (需要用到 node+npm node集成了npm) 下载安装uglify.js npm install uglify-js ...
- 记录一个在线压缩和还原压缩js代码的工具
packer – javascript 压缩工具 http://dean.edwards.name/packer/ Javascript Beautifier ---可以恢复某些压缩工具压缩的js代码 ...
- 【WebPack】引入Vue;认识Plugin;使用uglifyjs丑化JS代码;搭建本地服务器;生产开发环境配置文件的抽离
Vue实战 - 配套源码 npm install --save-dev vue-loader vue-template-compiler 可能会报错如下: 以上报错解决方式:修改版本^13.0.0,然 ...
最新文章
- Android自定义进度条
- 关于边缘计算,那些不边缘的“术”与“道”
- Homebrew 安装使用
- 实属无奈!华为加入不送充电器阵营
- java中有个很强大的工具jconsole.exe
- SVN Cleanup失败解决方法
- vue list数组合并和插入数据
- AOP:静态代理实现方式①通过继承②通过接口
- linux系统下将php和mysql命令加入到环境变量中的方法
- 【图像融合】基于matlab GUI拉普拉斯金字塔+小波变换图像融合【含Matlab源码 857期】
- linux zen 补丁,Mageia 7.1 发布,修复AMD Zen 2支持
- GridView排序状态保持
- 快冲!淘宝无货源副业,傻瓜式操作,日赚300-500元!!
- mybatis-plus,sgg,杨bochao
- Jextson tx2,AGX xavier,GTX 1080Ti,Quadro P4000, i5 cpu,计算能力对比
- Oracle Flashback之Flashback table和flashback drop
- Linux ps命令详解,Linux查看进程
- Linux中Web项目部署以及基本指令
- python利用ElementTree读写xml
- Java统计数组中各个数字出现的个数和字符串中各个字符出现的个数
热门文章
- 自动化运营Twitter,推特大V养成实用工具
- MySQL安装教程(压缩包方式)
- [思维模式-8]:《如何系统思考》-4- 认识篇 - 什么是系统思考?系统思考的特征?系统思考的思维转变。
- 交通信号标志识别软件(Python+YOLOv5深度学习模型+清新界面)
- Python - 100天从新手到大师
- 你就是光!王思琴老师加冕2022第三季完美大师全球人气季军!
- js处理价格数据,每三位加逗号,强制保留两位小数
- 另一个 OracleParameterCollection 中已包含 OracleParameter
- SAP IDES 4.71下载地址:(BT种子,9.3G)
- 山寨卫星锅陆续黑屏 民间版破解方法网上传