Web優化之Javascript Compressor

目的：

web項目前端js的體積大小影響頁面性能和用戶體驗， 壓縮js是web優化的一個重要手段。JavaScript的壓縮不是爲了保護代碼而壓縮，而是壓縮後的js代碼文件能夠小一倍甚至多倍，從而使這個js代碼快速的下載到客戶端，特別js文件較大時速度效果很是明顯．

 

方法：

JS優化的方法有如下幾個方法：

一、tomcat的壓縮， gzip壓縮啓用的狀況下， 壓縮的比例大概是1：6

二、js加載的時候合併下載， 能夠有效減小請求js產生的網絡鏈接次數。（知足Yahoo!前端優化第一條原則：Minimize HTTP Requests，來減小三路握手和HTTP請求的發送次數。）

三、編寫js的時候減小js體積， 通用的方法是js的壓縮， 壓縮的比例大概是1：2。（主要是去除JS文件裏的註釋、空白，而且壓縮局部變量長度等等）

 

JS壓縮工具和途徑：

一、在線壓縮：

提供在線壓縮的網站有不少，這裏推薦http://tools.css-js.com/compressor.html

推薦理由是這個站點裏面有四個壓縮引擎，一個YUI壓縮，一個UglifyJS壓縮，一個JSPacker壓縮，和一個新的JsMin壓縮。能夠根據本身須要選擇。
通常用UglifyJS引擎壓縮就能夠。jQuery和好些其餘的前端項目就是用他壓縮的。

 

二、壓縮工具：

幾款比較主流的壓縮內核：

UglifyJS 是用 NodeJS 編寫的 JavaScript 壓縮工具，是目前最流行的JS壓縮工具， JQuery 就是使用此工具壓縮， UglifyJS 壓縮率高，壓縮選項多，而且具備優化代碼，格式化代碼功能，目前國內能提供UglifyJS壓縮的都還處在1.0版本，本站率先升級到 2.0 時代。

YUI compressor 是Java編寫的壓縮工具，由雅虎發佈，壓縮是 100％ 的安全，比大多數其餘工具備更高的壓縮比， 通常代碼的壓縮率達到 40％ 至 60％，YUI compressor 也可以壓縮CSS文件，國內互聯網公司，阿里、淘寶、百度等都是採用 YUI compressor 內核壓縮後發佈代碼。

JSPacker 由PHP編寫的壓縮工具，能夠混淆代碼保護知識產權，產生的代碼兼容IE、FireFox等經常使用瀏覽器，國內大部分在線工具網站都採用這種算法壓縮，只由於此算法採用PHP編寫，正則表達式替換語句，沒有語法分析內核，環境搭建成本低，壓縮率上遠不如以上兩種內核，而且混淆代碼頁不符合開源精神。

JsMin 是用C語言編寫的一個輕量級JS壓縮器，去除JavaScript文件中的註釋和沒必要要的空格。它一般減小了一半的文件大小，從而致使更快的下載速度。

Google Closure Compiler 是一個JavaScript優化器，將Web應用編譯成壓縮的、高性能的JavaScript代碼。編譯器去除無效代碼，並將剩餘代碼重寫並壓縮，使Web應用可以快速在瀏覽器的JavaScript引擎上執行。這個工具在Google的Gmail，Google文檔和Google地圖中都有使用。Google但願這個工具的開源可以對Web開發社區有所幫助。

Javascript Obfuscator 是js壓縮和混淆工具，能夠經過這裏下載試用版：http://www.javascript-source.com/

 

這裏推薦YUI Compressor，YUI Compressor能夠很好的集成到ant中，ant編譯的腳本以下：

<property name="yuicompressor.path" location="yuicompressor-2.4.8.jar"/> 


<target name="compres-js-css" description="Compress js and css file">  
	    <echo>${ant.project.name} Compress js and css file</echo>
        <apply executable="java" dest="${webapps.dir}">
            <fileset dir="${src.web.dir}">
		<include Name="**/*.js"/>								
            </fileset>
            <arg line="-jar"/>
            <arg path="${yuicompressor.path}"/>
            <arg value="-o"/>
            <targetfile/>
            <mapper type="glob" from="*.js" to="*-min.js"/>
        </apply>
</target> 

 

JS編碼建議：

把JS文件用匿名函數的方式封裝起來，對外只給一個接口。這樣JS壓縮引擎就能夠把你匿名函數中不對外開放的內部變量名稱都給替換成a,b,c,d這樣的單字符，很能節省體積。