JS代码压缩混淆工具使用说明

本文介绍的是常见的3种工具的使用说明情况。

三种工具为:

1.Google Closure Compiler(本文简称GCC,下文同样)

官网:https://developers.google.com/closure/compiler/

Google出品的JS代码压缩/混淆工具。目前微信插件使用的就是GCC.

2.Yahoo Yui Compressor(本文简称Yui,下文同样)

官网:http://yui.github.io/yuicompressor/

Yahoo出品的JS代码压缩工具。

3.UglifyJS

官网:http://lisperator.net/uglifyjs/

开源项目。

下面介绍一下以上三种工具各自的使用情况:

一、GCC

有三种压缩模式，分别为”Whitespace only”，”Simple”，”Advanced”。

有三种运行方式，分别为”Closure Compiler Service UI”，”Closure Compiler Service API”，”Closure Compiler Application”。

（1）、三种压缩模式介绍

1）、”Whitespace only”:只是简单的去除空格换行注释。

2）、”Simple”:比”Whitespace only”更高端一点，在其基础上，还对局部变量的变量名进行缩短。这也是其他压缩工具所使用的压缩方式，如UglifyJS等，也是最为主流的压缩方式。比较安全。

3）、”Advanced”:”Advanced”级别的压缩改变（破坏）了原有代码结构，直接输出代码最终运行结果，而且这种级别的压缩还会删除未调用的函数代码。可见的确是分析，重写，破坏，但是对代码压缩做到了极致，极大的减少了代码量。

注意：正因为GCC是这样的破坏性压缩工具，所以使用起来得异常小心，书写要求严格，稍微不规范可能就会引起压缩报错或者压缩成功后却不能正常运行。

因为”Advanced”压缩缩短了变量名，使得一些对象的属性名发生改变，从而无法在使用该属性问题。解决办法是声明该属性时用括号括起来，例：

var data={

‘user’:’binning’,

‘age’:’18’

}

（2）、三种运行方式介绍

1）、”Closure Compiler Service UI”:GCC提供的在线压缩方式，只需导入文件路径或是直接复制粘贴文件内容，即可实现压缩。在线压缩网站为:http://closure-compiler.appspot.com/home

详细步骤如下：

A.打开页面，在”Add a URL”文本框中输入文件路径，然后点击”add”。或者直接把文件内容复制到下边的文件域中。

B.在”Optimization”中选择压缩模式，默认为”Simple”模式。

C.点击”Compile”按钮，进行压缩。如图，右侧这显示压缩完的文件信息。

D.可以选择复制下面的文本内容粘贴到压缩前原文件，或者右键点击”default.js”-->”链接另存为”，直接将压缩完的文件重命名并保存到本地。

2）、”Closure Compiler Service API”:通过自定义HTML页面发送请求的方式来获取压缩文件。与”Closure Compiler Service UI”相比，它可以建立自己的工具，创建自己的工作流。而”Closure Compiler Service UI”只适合压缩少量的代码和文件。

详细步骤如下：

A.创建一个名为”closure_compiler_test.html”的HTML页面，用于发送post请求。代码如下：

<html>

<body>

<p>Type JavaScript code to optimize here:</p>

function hello(name) {

// Greets the user

alert('Hello, ' + name);

}

hello('New user');

</textarea>

</form>

</body>

</html>

B.用浏览器打开该HTML文件，点击”Optimize”按钮提交，并会返回压缩后文件。然后复制粘贴保存。

注意：每个请求至少必须发送以下参数：

a.”js_code”或”code_url”:这个参数的值指示要编译的JavaScript。必须至少包含其中一个参数，并且可以同时包括。”js_code”必须是包含javascript的字符串。”code_url”必须是包含js文件的url地址。

b.”compilation_level”:这个参数表示文件压缩的模式，有三个值，分别为”whitespace_only”，”simple_optimizations”，”advanced_optimizations”。上文用的是”whitespace_only”，默认为”simple_optimizations”。

c.”output_info”:此参数的值指示要从编译器获取的信息类型。有四个值，分别为”compiled_code”，”warnings”，”errors”，”statistics”。上文用的是”compiled_code”，返回的是压缩好的文件。

d.”output_format”:此参数表示输出的格式。有三个值，分别为”text”，”json”，”xml”。

默认为”text”。

更多关于API的使用请参照官网。

3）、”Closure Compiler Application”:用官网提供的客户端进行代码压缩。从官网下载压缩包，地址为：https://dl.google.com/closure-compiler/compiler-latest.zip。本客户端是在Java环境下运行的，所以下载之前应安装JDK。安装JDK步骤参考：http://jingyan.baidu.com/article/2d5afd6993a6db85a2e28e9f.html

详细步骤如下：

A.创建一个名为”closure-compiler”的文件夹。

B.把下载的压缩包解压到”closure-compiler”下。

C.把要压缩的js文件也放到当前目录下。

D.用命令窗口打开文件夹中”README.md”文件。打开如下

系统会自动进入到当前文件位置。如果没有打开，可以尝试如下做法：

a.按”windows+r”键，进入“运行”，输入”cmd”，进入命令窗口。

b.然后输入刚刚创建的”closure-compiler”文件夹的路径。例：”F:\workspace\closure-compiler”，则如下：

E.然后输入”java -jar 目录下.jar文件--js 目录下.js文件--js_output_file 压缩完保存的文件名”，例：”java -jar closure-compiler-v20161201.jar --js setting.js --js_output_file setting.min.js”，生成的文件也会保存在当前的目录下(closure-compiler文件夹)。生成的文件的压缩模式默认为”SIMPLE”，如果要改变其他的压缩模式，在上边的的语句中添加”--compilation_level=ADVANCED”，值可以为”WHITESPACE_ONLY”，”SIMPLE”，”ADVANCED”。

如果想了解更多使用方法，请输入”java -jar closure-compiler-v20161201.jar --help”。

二、Yui

可以压缩JS和CSS文件，有三中压缩方式，分别为：“nomunge”，“preserve-semi”，“disable-optimizations”。Yui是java程序，因此要配置JDK，如何配置看上文。

1）、压缩方式介绍：

A.”--nomunge”:只压缩,不对局部变量进行混淆。只是删除空格换行注释和部分结尾分号。

B.”--preserve-semi”:在”--nomunge”的基础上，保留所有的分号，并且对局部变量进行混淆。

C.”--disable-optimizations”:禁止优化。对局部变量进行混淆，而且删除部分结尾的分号。

2）、通用参数介绍

-h,--help:显示帮助信息。

--type <js|css>:指定输入文件的文件类型。

--line-break <column>:在指定的列后插入一个换行符号。

--charset <charset>:指定读取输入文件使用的编码。

-o <outfile>:指定输出文件。默认输出是控制台。

-v, --verbose:显示info和warn级别的信息。

3）、javascript专用参数

--nomunge:只压缩,不对局部变量进行混淆。

--preserve-semi:保留所有的分号。

--disable-optimizations:禁止优化。

4）、详细使用步骤

A.创建一个名为”Yui-compressor”的文件夹。

B.下载并解压文件到”Yui-compressor”文件夹中。下载地址为： https://github.com/yui/yuicompressor/releases/download/v2.4.8/yuicompressor-2.4.8.zip

C.把要压缩混淆的js或者是CSS文件放到该目录下。

D.按”windows+r”,进入运行打”cmd”，进入命令行窗口。进入到当前文件夹位置，如下：

E.然后输入”java -jar 解压后jar文件压缩原文件-o 压缩后文件”，例：”java -jar yuicompressor-2.4.8.jar hello.js -o hello.min.js”，如图：

默认压缩混淆格式为:”--disable-optimizations”，可以手动修改另外两种。如：

三、UglifyJS

uglifyJs是基于Nodejs的，所以安装UglifyJs之前，先安装NodeJs。NodeJs下载地址：https://nodejs.org/en/

之后安装点下一步即可。安装完成后，下载UglifyJs，地址：https://github.com/mishoo/UglifyJS2#readme

解压即可。

uglifyjs的作者建议的就是先把文件放在前面，再把一些压缩/美化的参数跟在后边。

1）、常用的参数列表

-o,--output：指定输出文件，默认情况下为命令行

-b,--beautify：美化代码格式的参数

-m,--mangle:改变变量名称（ex：在一些例如YUI Compressor压缩完的代码后你可以看到a,b,c,d,e,f之类的变量，加了-m参数，uglifyjs也可以做到，默认情况下，是不会改变变量名称的）

-r,--reserved：保留的变量名称，不需要被-m参数改变变量名的

-c,--compress：让uglifyjs进行代码压缩的参数。

--comments：用来控制注释的代码的

更多参数介绍，请参考官网

2）、详细使用步骤

A.创建一个名为”UglifyJS”的文件夹。

B.把下载的UglifyJS文件解压文件到”UglifyJS”文件夹中。

C.把要压缩混淆的js文件放到该目录下。

D.点击目录下的”README.md”文件。

E.输入”uglifyjs 原js文件 -o 压缩后js文件 -c”，进行压缩。也可以在后面添加”-m”，缩短变量长度。例：”uglifyjs setting.js -o setting.min.js -m -c”

四、三者之间的区别

GCC压缩混淆的最彻底，但是破坏原有代码，并且不可压缩CSS文件，运行在java环境下，危险，要严格注意书写规范。

Yui可以压缩CSS文件，安全，但是压缩完的文件函数名称没有混淆，压缩混淆的作用小，运行在java环境下。

UglifyJs不可以压缩混淆CSS文件，运行在NodeJs环境下，但是压缩完的文件函数名称没有混淆，压缩混淆的作用小，安全。

JS代码压缩混淆工具使用说明相关推荐

使用UglifyJS实现将js代码压缩混淆
使用UglifyJS进行js代码压缩混淆(混淆后的代码的可读性是较高的,这里主要是压缩体积) 安装:全局:npm install uglify-js -g 局部:npm install uglify- ...
js代码压缩混淆uglify
-c压缩,-m混淆命名,-b格式化输出js文件(否则为只有一行),-o目标输出文件. 压缩一个文件: uglifyjs main.js -o publish/main.js -c -m -b 压缩多个 ...
uglify js 代码压缩混淆
关于 js 压缩混淆 npm install uglify-js -g(不支持 es6语法) npm install uglify-es -g(支持es6语法) 使用命令uglifyjs uglify ...
Java代码加密混淆工具有哪些?
在Java中,代码加密混淆工具可以帮助开发者将源代码进行加密和混淆处理,以增加代码的安全性和保护知识产权.以下是一些流行的Java代码加密混淆工具: 第一款:ProGuard:ProGuard Pro ...
在线CSS代码压缩美化工具
在线CSS代码压缩美化工具在线CSS代码压缩美化工具在线CSS代码压缩.格式化工具.可以删除注释在线CSS代码压缩.格式化工具.可以删除注释 https://tooltt.com/css/
web前端学习中CSS，JS代码压缩
web前端要学习的知识有很多,前端基础要学习三个部分:HTML,CSS,JavaScript(简称JS),因此首先明确三个概念:HTML负责结构,网页想要表达的内容由html书写. CSS负责样式,网 ...
linux css压缩工具下载,JS和CSS的压缩混淆工具(JsCompressor)下载 v3.0
JsCompressor是一款web前端人员必备利器,它主要用来压缩混淆JS(Javascript)与CSS,基于YUI Compressor,目的是方便不熟悉Java或者不喜欢命令行方式进行压缩的W ...
基于Babel对JS代码进行混淆与还原操作
原文地址 js代码之还原自写在线混淆与还原网站 JS代码混淆与还原 (kuizuo.cn) 还原前言 AST 仅仅只是静态分析,但可以将还原出来的代码替换原来的代码,以便更好的动态分析找出相关点.在 ...
编译级Javascript压缩混淆工具:Closure-Compiler
真正的编译器 Closure-Compiler 主页:https://code.google.com/p/closure-compiler/ 压缩JS脚本的工具有很多,例如JSMin,UglifyJS ...
android 万能混淆文件,Android ProGuard 代码压缩混淆与打包优化
为什么要启动ProGuard(所有试验都在AS 环境) 代码压缩通过 ProGuard 提供,ProGuard 会检测和移除封装应用中未使用的类.字段.方法和属性, 包括自带代码库中的未使用项(这使其 ...

JS代码压缩混淆工具使用说明

JS代码压缩混淆工具使用说明相关推荐

最新文章

热门文章