1. 程式人生 > >你需要掌握的前端程式碼效能優化工具

你需要掌握的前端程式碼效能優化工具

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 CompressorDOS批處理指令碼壓縮JavaScriptCSS,加上IISGZIP,加起來能得到85%左右的壓縮率。

三個檔案:

批處理檔案:yuicompressor.bat
登錄檔檔案:yuicompressor.reg
壓縮jar包:yuicompressor-2.4.6.jar