JS 压缩混淆

概念介绍

昨天接到了一个任务,H5  app 的JS CSS 需要压缩,混淆。

然后怎么办呢?

首先理解下压缩混淆是指什么

压缩 compress: 去掉空格,换行,注释等,格式紧凑,节约存储空间。

混淆 obfuscate/garble:替换变量名或方法名,让js不容易看懂。也做到了压缩的效果。

加密 encrypt:一般用eval方法加密,效果与混淆相似。也做到了压缩的效果。

混淆加密:先混淆再加密。

百度一下js压缩,混淆会搜到一堆在线混淆加密的网页,但是这些都不是你想要的。

但是觉得这个网页混淆做的好:http://www.moralsoft.com/jso-online/hdojso.htm

我们不可能把那么多js文件一个一个的混淆加密,就算你愿意,你老板也觉得你很low。

然后我找到了UglifyJS,一款很强大的js工具。

UglifyJS简介

UglifyJs 是一个js 解释器、最小化器、压缩器、美化器工具集(parser, minifier, compressor or beautifier toolkit)。

这个网页是命令行使用的文档,要看API和内部文档请到UglifyJS作者的网站。 另外还有个在线demo(FF、chrome,safari可能也行)

GitHub地址:https://github.com/mishoo/UglifyJS

中文文档地址:https://segmentfault.com/a/1190000008995453

安装

首先确认一直你已经安装了最新的node.js(装完后或许需要重启一下电脑)

用NPM安装CLI:

npm install uglify-js -g

用NPM下载给程序使用:

npm install uglify-js

用Git下载:

git clone git://github.com/mishoo/UglifyJS2.git
cd UglifyJS2
npm link 

使用

uglifyjs [input files] [options]

UglifyJS2可以输入多文件。建议你先写输入文件,再传选项。UglifyJS会根据压缩选项,把文件放在队列中依次解释。所有文件都会在同一个全局域中,假如一个文件中的变量、方法被另一文件引用,UglifyJS会合理地匹配。

假如你不要输入文件,而是要输入字符串(STDIN),那就把文件名换成一个横线(-)

如果你想要把选项写在文件名的前面,那要在二者之前加上双横线,防止文件名被当成了选项:

uglifyjs --compress --mangle -- input.js

以下是可用的选项:

  --source-map                  指定输出的文件产生一份sourcemap 
  --source-map-root             此路径中的源码编译后会产生sourcemap
  --source-map-url              放在//#sourceMappingURL的sourcemap路径.  默认是 
                                --source-map传入的值.
  --source-map-include-sources  如果你要在sourcemap中加上源文件的内容作为sourcesContent属性,
                                就传这个参数吧。
  --source-map-inline           把sourcemap以base64格式附在输出文件结尾
  --in-source-map               输入sourcemap。假如的你要编译的JS是另外的源码编译出来的。
                                假如该sourcemap包含在js内,请指定"inline"。
  --screw-ie8                   是否要支持IE6/7/8。UglifyJS默认不兼容IE。
  --support-ie8                 是否要支持IE6/7/8,等同于在`compress`, `mangle` 和
                                 `output`选项中都设置`screw_ie8: false`
  --expr                        编译一个表达式,而不是编译一段代码(编译JSON时用)
  -p, --prefix                  忽略sourcemap中源码的前缀。例如`-p 3`会干掉文件名前面3层目录
                                以及保证路径是相对路径。你也可以指定`-p relative`,让UglifyJS
                                自己计算输出文件、sourcemap与源码之间的相对路径。
  -o, --output                  输出文件,默认标准输出(STDOUT)
  -b, --beautify                美化输出/指定输出 选项
  -m, --mangle                  Mangle的名字,或传入一个mangler选项.
  -r, --reserved                mangle的例外,不包含在mangling的名字
  -c, --compress                是否启用压缩功能(true/fasle),或者传一个压缩选项对象, 例如 
                                `-c 'if_return=false,pure_funcs=["Math.pow","console.log"]'`,
                                `-c`不带参数的话就是用默认的压缩设置。
  -d, --define                  全局定义
  -e, --enclose                 所有代码嵌入到一个大方法中,传入参数为配置项
  --comments                    保留版权注释。默认保留Google Closure那样的,保留JSDoc-style、
                                包含"@license" 或"@preserve"字样的注释。你也可以传下面的参数:
                                - "all" 保留所有注释
                                - 正则(如`/foo/`、`/^!/`)保留匹配到的。要注意,如果启用了压
                                缩,因为会移除不可达代码以及压缩连续声明,因此不是*所有*注释都能
                                保留下来。
  --preamble                    在输出文件开头插入的前言。你可以插入一段注释,例如版权信息。
                                这些不会被编译,但sourcemap会改成当前的样子。
  --stats                       在STDERR中显示操作运行时间。
  --acorn                       用 Acorn解析。
  --spidermonkey                假如输入文件是 SpiderMonkey AST 格式(像JSON).
  --self                        把UglifyJS2本身也构建成一个依赖包
                                (等同于`--wrap=UglifyJS --export-all`)
  --wrap                        所有代码嵌入到一个大函数中,让"exports"和"global"变量有效,
                                你需要传入一个参数指定模块被浏览器引入时的名字。
  --export-all                  只当`--wrap`时有效,告诉UglifyJS自动把代码暴露到全局。
  --lint                        显示一些可视警告
  -v, --verbose                 Verbose
  -V, --version                 打印版本号.
  --noerr                       不要为-c,-b 或 -m选项中出现未知选项而抛出错误。
  --bare-returns                允许返回函数的外部。当最小化CommonJs模块和Userscripts时,
                                可能匿名函数会被.user.js引擎调用立即执行(IIFE)
  --keep-fnames                 不要混淆、干掉的函数的名字。当代码依赖Function.prototype.name时有用。
  --reserved-file               要保留的文件的名字
  --reserve-domprops            保留(绝大部分?)DOM的属性,当--mangle-props
  --mangle-props                混淆属性,默认是`0`.设置为`true`或`1`则会混淆所有属性名。
                                设为`unquoted`或 `2`则只混淆不在引号内的属性。`2`时也会让
                                `keep_quoted_props` 美化选项生效,保留括号内的属性;让压缩选项
                                的`properties`失效,阻止覆写带点号(.)的属性。你可以通过在命令
                                中明确设置来覆写它们。
  --mangle-regex                混淆正则,只混淆匹配到的属性名。
  --name-cache                  用来保存混淆map的文件
  --pure-funcs                  假如返回值没被调用则可以安全移除的函数。 
                                例如`--pure-funcs Math.floor console.info`(需要设置 `--compress`)

指定--output (-o)来明确输出文件,否则将在终端输出(STDOUT)

批量压缩混淆工具

1、Jasob

2、YUI Compressor

Jasob官网下载:http://www.jasob.com

YUI下载:https://pan.baidu.com/s/1bpldTMJ  windows exe版

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Dart abstract class mixin 究竟哪里不一样呢?

    需要使用 实现类 extends 之后调用,使用implements需要实现默认方法。

    ZY_FlyWay
  • Flutter 运行到浏览器

    最近想让Flutter 项目运行到浏览器试一下,按照一些博客说明,做了下面的操作。

    ZY_FlyWay
  • 你想知道得Cocoapod podflie 引用库的方式都在这里

    ZY_FlyWay
  • 搭建一个低配版的Mock Server

    通过阅读本文,你将对Mock的使用有一定的了解,对前后端分离的概念有了更深一步的认识,对Koa的使用有一定的了解。本文先从背景出发去抛出“我们为什么要用Mock...

    丰臣正一
  • Virtual Machine Manager 2012 R2利用服务模板部署DC

    服务模板作为VMM非常重要的一个功能,无论是在日常的应用虚机创建,还是在私有云中的自助申请,我们都需要先创建好各种的服务模板,管理员或者根据工作流再通过这些服务...

    李珣
  • ​金融风控的护航员——聊聊ERNIE在度小满用户风控的应用

    央行发布的《2018年第三季度支付体系运行总体情况》显示,我国信用卡逾期半年未偿信贷总额880.98亿元,环比增长16.43%。

    用户1386409
  • 鸡兔同笼问题新解与Python实现

    问题描述:鸡兔同笼问题。假设共有鸡、兔30只,脚90只,求鸡、兔各有多少只。 传统思路,使用暴力测试来枚举所有可能。 for ji in range(0, 31...

    Python小屋屋主
  • web前端入门到实战:18种推荐的CSS命名和书写规范

    以上的说明只是举例,大家可以根据项目需求自定义开头的字符,这样做的目的是使CSS代码整洁易维护。

    用户5827212
  • 零基础Python教程031期 for循环,让代码更灵活!

    Range函数的作用是返回一个数组。使用的时候需要传入一个数值的开始,和数值的结尾。注意:range函数是一个半开半闭区间,包含开头的值,不包含结尾的值。

    刘金玉编程
  • 数据结构与算法(3)——树(二叉、二叉搜索树)树LeetCode相关题目整理

    树是一种类似于链表的数据结构,不过链表的结点是以线性方式简单地指向其后继结点,而树的一个结点可以指向许多个结点;数是一种典型的非线性结构;树结构是以表达具有层次...

    我没有三颗心脏

扫码关注云+社区

领取腾讯云代金券