Archive

文章標籤 ‘YUI’

用YUI Compressor精簡你的肥肥Javascript及CSS檔案吧

2010年10月13日 尚無評論

   小弟先前有個客戶網站用了大量特效及圖片,在監控時發現,讀取首頁時瀏覽者讀了3.1MB才能讀完,在進行瘦身後瀏覽者只要讀700KB左右就能讀完,如果不考慮網站頻寬,以現今效多瀏覽者使用的網路頻寬為2M/256K為例,前者需要12秒而後者只需3秒左右,是不是落差很大呢? 如果是你,你會想上前者這樣的網站嗎?

     網站使用者都是希望你的網站是很友善、美觀及很快速的,在現今友善化的網站,大多都使用很多javascript及css,所以相對的你將會降低的是你的網站執行效能。 為此,如何將這些javascript 及css sytle 減少系統及頻寬的loading,這就是當務首要,也是現今網站規畫中,要注意的一環。

     會影響網站效能的原因很多,今天就介紹如何做好一些上版時的動作來增加效能,先前有提及可以針對你的網站伺服器開啟使用gzip 來進行網頁的壓縮,以減少網站頻寬的使用;今天來介紹可以使用YUI Compressor工具來降低你的javascript及css style檔案的大小,因為這些都是原始碼,為了方便編輯及辨識,所以開發人員往往加上許多顯示格式所需要的字元,再加上web 2.0盛行,大量的函式庫的引用,都會讓你的檔案不小心就會慢慢變的很大。以jquery-v1.3.js來看,一百多K的檔案精簡後jquery-min-v1.3.js 只剩不到60K如果再加上gzip傳輸應該頻寬會省更大。

     以下則為該工具的介紹 :

YUI Compressor – The Yahoo! JavaScript and CSS Compressor Download
下載地址 : http://www.julienlecomte.net/yuicompressor/
The YUI Compressor requires Java version >= 1.4. (機器需要Java 1.4以上的環境)

可建立一個批處理文件,例如YUICompressor.bat,文件內容如下:

@echo off
::設置YUI Compressor啟動目錄
SET YUIFOLDER=D:\yuicompressor-2.4.2\build
::設置你的JS和CSS根目錄,腳本會自動按目錄層次查找和壓縮所有的JS和CSS
SET JSFOLDER=D:\mySite\myJS
echo 正在查找 JavaScript, CSS …
chdir /d %JSFOLDER% for /r . %%a in (*.js *.css) do (
@echo 正在壓縮 %%~a …
@java -jar %YUIFOLDER%\yuicompressor-2.4.2.jar –charset UTF-8 %%~fa -o %%~fa
)
echo 完成!
pause & exit

參考資料:http://hi.baidu.com/zdz8207/blog/item/d644ae6ea0f2c5d181cb4ab7.html

Categories: WebDesign Tags: , ,