你需要掌握的前端程式碼效能優化工具
Google Closure Compiler
Closure Compiler
的使用方法有如下3種:
在命令列下使用一個google編譯好的java程式
使用google提供的線上服務
使用google提供的RESTful API
首先需要下載compiler-latest.zip,由於可能有的使用者沒法翻牆,所以我把它下載下來放到我的網盤上供大家下載使用。
下載下來之後,進入這個檔案所在目錄,以我的為例:$ cd cd /Users/trigkit4/Downloads/
然後解壓該檔案:$ unzip compiler-latest.zip -d ~
,會出現如下檔案列表:
Archive : compiler-latest.zip
inflating: /Users/trigkit4/compiler.jar
inflating: /Users/trigkit4/COPYING
inflating: /Users/trigkit4/README.md
然後壓縮compiler.jar
,程式碼如下:
$ java -jar ~/compiler.jar –js my_source.js –js_output_file my_package.js
這樣,就把 my_source.js
壓縮成my_package.js
了。
如果想知道其他的可選引數,可以輸入如下命令獲得:
$ java -jar ~/compiler.jar –help
使用google提供的線上服務
使用google提供的RESTful API
該方法缺點是無法壓縮大檔案,API
文件見http://code.google.com/closure/compiler/docs/api-tutorial1.html 。原理大概就是將需要壓縮的js
內容或js
檔案所在url
,以及必要的配置資訊傳送給google
的伺服器,然後接收google
的響應,響應結果即為壓縮後的內容。
CSS Lint
CSSLint
是一個用來幫你找出 CSS
程式碼中問題的工具,它可做基本的語法檢查以及使用一套預設的規則來檢查程式碼中的問題,規則是可以擴充套件的。
JSHint
JSHint
是一個JavaScript
的程式碼質量檢查工具,主要用來檢查程式碼質量以及找出一些潛在的程式碼缺陷。
使用方法:進入官網首頁,貼上你的程式碼,你的錯誤和不正當的用法就會在右邊實時顯示了,如你所料,它是英文版本的
本地安裝
在終端或者CMD裡輸入如下命令列,不過前提是你裝了npm
,時間有點長,取決於網路:
npm install jshint
如圖所示:
執行JSHint
開啟終端或者cmd
命令視窗,使用cd
切換到你對應的應用目錄下,輸入如下命令列:
jshint my_app.js
UglifyJS
UglifyJS
是基於 NodeJS
的Javascript
語法解析/壓縮/格式化工具
安裝
$ npm install uglify-js -g
例子
Mac
系統開啟終端,cd
到js
檔案所在目錄,比如:
cd /Volumes/Mac/js
然後輸入如下命令進行壓縮一個名叫base.js的檔案:
trigkit4:js trigkit4$ uglifyjs base.js -o base-min.js
trigkit4:js trigkit4$ uglifyjs base.js -m -o base.js
-m
引數是把變數名變成a,
b, c, d
進行替換的
YUI Compressor
YUI Compressor
壓縮 js
的內容包括:
移除註釋
移除額外的空格
細微優化
識別符號替換(Identifier Replacement)
機器需要Java 1.4
以上的環境,所以需先下載JDK,配置環境。
使用YUI Compressor壓縮JS和Css
常用示例(在cmd中執行)
java -jar D:\yuicompressor-2.4.6\build\yuicompressor-2.4.6.jar --type js --charset UTF-8 D:\my.js -o D:\my-min.js
java -jar D:\yuicompressor-2.4.6\build\yuicompressor-2.4.6.jar --type css --charset UTF-8 D:\my.css -o D:\my-min.css
引數說明:
`–type`指定要打包的檔案型別,可選的有 `js`和`css`
`–charset` 指定字符集
`-o` 指定輸出的檔名,如果不指定這個引數將會把壓縮後的內容輸出到命令列上
最後的my.js和my.css是要打包的debug版原始檔
使用YUI Compressor
和DOS
批處理指令碼壓縮JavaScript
和CSS
,加上IIS
的GZIP
,加起來能得到85%
左右的壓縮率。
三個檔案:
批處理檔案:yuicompressor.bat
登錄檔檔案:yuicompressor.reg
壓縮jar包:yuicompressor-2.4.6.jar