用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以上的環境）
下載地址 : 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
::設置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
近期留言