javascript
JS代码压缩混淆工具使用说明
本文介紹的是常見的3種工具的使用說明情況。
三種工具為:
??1.Google Closure Compiler(本文簡稱GCC,下文同樣)
??官網(wǎng):https://developers.google.com/closure/compiler/
??Google出品的JS代碼壓縮/混淆工具。目前微信插件使用的就是GCC.
??2.Yahoo Yui Compressor(本文簡稱Yui,下文同樣)
??官網(wǎng):http://yui.github.io/yuicompressor/
??Yahoo出品的JS代碼壓縮工具。
??3.UglifyJS
??官網(wǎng):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”級別的壓縮改變（破壞）了原有代碼結構，直接輸出代碼最終運行結果，而且這種級別的壓縮還會刪除未調(diào)用的函數(shù)代碼。可見的確是分析，重寫，破壞，但是對代碼壓縮做到了極致，極大的減少了代碼量。
???????注意：正因為GCC是這樣的破壞性壓縮工具，所以使用起來得異常小心，書寫要求嚴格，稍微不規(guī)范可能就會引起壓縮報錯或者壓縮成功后卻不能正常運行。
???????因為”Advanced”壓縮縮短了變量名，使得一些對象的屬性名發(fā)生改變，從而無法在使用該屬性問題。解決辦法是聲明該屬性時用括號括起來，例：
???????var data={
‘user’:’binning’,
‘a(chǎn)ge’:’18’
}
??（2）、三種運行方式介紹
??????1）、”Closure Compiler Service UI”:GCC提供的在線壓縮方式，只需導入文件路徑或是直接復制粘貼文件內(nèi)容，即可實現(xiàn)壓縮。在線壓縮網(wǎng)站為:http://closure-compiler.appspot.com/home
??????詳細步驟如下：
??????A.打開頁面，在”Add a URL”文本框中輸入文件路徑，然后點擊”add”?；蛘咧苯影盐募?nèi)容復制到下邊的文件域中。
??????B.在”O(jiān)ptimization”中選擇壓縮模式，默認為”Simple”模式。
??????C.點擊”Compile”按鈕，進行壓縮。如圖，右側(cè)這顯示壓縮完的文件信息。
?
??????D.可以選擇復制下面的文本內(nèi)容粘貼到壓縮前原文件，或者右鍵點擊”default.js”-->”鏈接另存為”，直接將壓縮完的文件重命名并保存到本地。
??????2）、”Closure Compiler Service API”:通過自定義HTML頁面發(fā)送請求的方式來獲取壓縮文件。與”Closure Compiler Service UI”相比，它可以建立自己的工具，創(chuàng)建自己的工作流。而”Closure Compiler Service UI”只適合壓縮少量的代碼和文件。
??????詳細步驟如下：
??????A.創(chuàng)建一個名為”closure_compiler_test.html”的HTML頁面，用于發(fā)送post請求。代碼如下：
??????<html>
??<body>
????<form action="http://closure-compiler.appspot.com/compile" method="POST">
????<p>Type JavaScript code to optimize here:</p>
????<textarea name="js_code" cols="50" rows="5">
????function hello(name) {
??????// Greets the user
??????alert('Hello, ' + name);
????}
????hello('New user');
????</textarea>
????<input type="hidden" name="compilation_level" value="WHITESPACE_ONLY">
????<input type="hidden" name="output_format" value="text">
????<input type="hidden" name="output_info" value="compiled_code">
????<br><br>
????<input type="submit" value="Optimize">
????</form>
??</body>
</html>
?
?????B.用瀏覽器打開該HTML文件，點擊”O(jiān)ptimize”按鈕提交，并會返回壓縮后文件。然后復制粘貼保存。
?????注意：每個請求至少必須發(fā)送以下參數(shù)：
???????a.”js_code”或”code_url”:這個參數(shù)的值指示要編譯的JavaScript。必須至少包含其中一個參數(shù)，并且可以同時包括。”js_code”必須是包含javascript的字符串。”code_url”必須是包含js文件的url地址。
???????b.”compilation_level”:這個參數(shù)表示文件壓縮的模式，有三個值，分別為”whitespace_only”，”simple_optimizations”，”advanced_optimizations”。上文用的是”whitespace_only”，默認為”simple_optimizations”。
???????c.”output_info”:此參數(shù)的值指示要從編譯器獲取的信息類型。有四個值，分別為”compiled_code”，”warnings”，”errors”，”statistics”。上文用的是”compiled_code”，返回的是壓縮好的文件。
???????d.”output_format”:此參數(shù)表示輸出的格式。有三個值，分別為”text”，”json”，”xml”。
默認為”text”。
??更多關于API的使用請參照官網(wǎng)。
??????3）、”Closure Compiler Application”:用官網(wǎng)提供的客戶端進行代碼壓縮。從官網(wǎng)下載壓縮包，地址為：https://dl.google.com/closure-compiler/compiler-latest.zip。本客戶端是在Java環(huán)境下運行的，所以下載之前應安裝JDK。安裝JDK步驟參考：http://jingyan.baidu.com/article/2d5afd6993a6db85a2e28e9f.html
??????詳細步驟如下：
??????A.創(chuàng)建一個名為”closure-compiler”的文件夾。
??????B.把下載的壓縮包解壓到”closure-compiler”下。
??????C.把要壓縮的js文件也放到當前目錄下。
??????D.用命令窗口打開文件夾中”README.md”文件。打開如下
??????
系統(tǒng)會自動進入到當前文件位置。如果沒有打開，可以嘗試如下做法：
??????a.按”windows+r”鍵，進入“運行”，輸入”cmd”，進入命令窗口。
??????b.然后輸入剛剛創(chuàng)建的”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”:禁止優(yōu)化。對局部變量進行混淆，而且刪除部分結尾的分號。
??2）、通用參數(shù)介紹
-h,--help:顯示幫助信息。
--type <js|css>:指定輸入文件的文件類型。
--line-break <column>:在指定的列后插入一個換行符號。
--charset <charset>:指定讀取輸入文件使用的編碼。
-o <outfile>:指定輸出文件。默認輸出是控制臺。
-v, --verbose:顯示info和warn級別的信息。
??3）、javascript專用參數(shù)
--nomunge:只壓縮,不對局部變量進行混淆。
--preserve-semi:保留所有的分號。
--disable-optimizations:禁止優(yōu)化。
??4）、詳細使用步驟
A.創(chuàng)建一個名為”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的作者建議的就是先把文件放在前面，再把一些壓縮/美化的參數(shù)跟在后邊。
??1）、常用的參數(shù)列表
??-o,--output：指定輸出文件，默認情況下為命令行
??-b,--beautify：美化代碼格式的參數(shù)
??-m,--mangle:改變變量名稱（ex：在一些例如YUI Compressor壓縮完的代碼后你可以看到a,b,c,d,e,f之類的變量，加了-m參數(shù)，uglifyjs也可以做到，默認情況下，是不會改變變量名稱的）
??-r,--reserved：保留的變量名稱，不需要被-m參數(shù)改變變量名的
??-c,--compress：讓uglifyjs進行代碼壓縮的參數(shù)。
??--comments：用來控制注釋的代碼的
更多參數(shù)介紹，請參考官網(wǎng)
??2）、詳細使用步驟
??A.創(chuàng)建一個名為”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”
四、三者之間的區(qū)別
GCC壓縮混淆的最徹底，但是破壞原有代碼，并且不可壓縮CSS文件，運行在java環(huán)境下，危險，要嚴格注意書寫規(guī)范。
Yui可以壓縮CSS文件，安全，但是壓縮完的文件函數(shù)名稱沒有混淆，壓縮混淆的作用小，運行在java環(huán)境下。
UglifyJs不可以壓縮混淆CSS文件，運行在NodeJs環(huán)境下，但是壓縮完的文件函數(shù)名稱沒有混淆，壓縮混淆的作用小，安全。
總結
以上是生活随笔為你收集整理的JS代码压缩混淆工具使用说明的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux 安装qq,如何安装linux
- 下一篇： debian apt-get联网安装my