:::

在 PHP 使用 YUI Compressor 壓縮 JavaScript 跟 CSS

2011-11-14_232832 yui logo

我在寫程式的時候,習慣搭配程式註解一併撰寫。寫JavaScript就搭配JSDoc,寫CSS就搭配CSSDoc,寫著寫著程式碼就會非常非常地龐大,造成使用者每次都要下載過大的檔案內容而效率緩慢。

YUI是一套開放原始碼的JavaScript與CSS框架,以BSD授權條款開放使用。它其中一個相當知名的功能是JavaScript與CSS的壓縮器(compressor)。這篇是要教你如何在PHP的環境中使用YUI Compressor來壓縮JavaScript與CSS。


安裝配置

由於這篇的目的是使用PHP作為開發環境,相信你已經有了一個運作PHP的環境。我自己的測試環境是以XAMPP 1.7.0架設,使用PHP 5.2.8。

首先,你要準備一個資料夾,用來擺放YUI Compressor與相關檔案。

再來將以下檔案下載到該資料夾中:

安裝Java

由於YUI Compressor使用Java,你必須確保你的環境中安裝了JDK才行。請到Java網站下載Java Platform (JDK),他有提供Windows與Linux各種版本。

然而我在CentOS作業系統中安裝JDK 7u1時不知為何地失敗了,所以我又回頭去裝了JDK 6u12。

下載之後,請調整該檔案的權限為755,然後執行該檔案。舉例來說指令如下:

[root@dspace ~]# chmod 755 jdk-6u12-linux-i586-rpm.bin
[root@dspace ~]# ./jdk-6u12-linux-i586-rpm.bin

如要確認Java能夠使用,請輸入以下指令並可能會看到如下訊息:(可能是因為我先裝7u1失敗的關係,以下版本顯示的是7u1而不是6u12)

[root@dspace ~]# java -version
java version "1.7.0_01"
Java(TM) SE Runtime Environment (build 1.7.0_01-b08)
Java HotSpot(TM) Client VM (build 21.1-b02, mixed mode)

這樣就完成配置囉。


壓縮使用

使用YUI Compressor時,要先引用Minify_YUICompressor.php,然後透過它的靜態方法minifyJs()跟minifyCss()來輸入要壓縮的程式碼,並取得壓縮過後的程式碼。

以下是minifyJs跟minifyCss的用法:

/**
* Minify a Javascript string
*
* @param string $js
*
* @param array $options (verbose is ignored)
*
* @see http://www.julienlecomte.net/yuicompressor/README
*
* @return string
*/
public static function minifyJs($js, $options = array())

/**
* Minify a CSS string
*
* @param string $css
*
* @param array $options (verbose is ignored)
*
* @see http://www.julienlecomte.net/yuicompressor/README
*
* @return string
*/
public static function minifyCss($css, $options = array())

使用範例

為了讓大家更容易理解如何使用,請下載以下兩個範例檔案到上述Minify_YUICompressor.php跟yuicompressor-2.4.6.jar的同一個資料夾中。

我們先看一下blogger-template.css的原始碼,這是一個沒有經過壓縮的CSS程式,大概長得像下面這樣子,程式碼大小為19.9KB:

2011-11-14_232059 blogger-template.css

然後我們再透過minifyCss.php看一下壓縮過的樣子,壓縮過後程式碼大小為13.4KB,足足有67.3%的壓縮率:

2011-11-14_232133 minifyCss.php

以下是minifyCss.php的程式碼內容。這裡面包括了在HTTP標頭輸出為CSS格式的指令,以協助瀏覽器正確判斷資料內容。

<?php
header('Content-type: text/css', TRUE);

include("Minify_YUICompressor.php");
$script = file_get_contents("blogger-template.css");
$packed = Minify_YUICompressor::minifyCss($script);
echo $packed;

而JavaScript也是以此類推,以下是minifyJs.php壓縮JavaScript的標頭輸出與壓縮寫法:

<?php
header('Content-type: text/javascript', TRUE);

include("Minify_YUICompressor.php");
$script = file_get_contents("puliBloggerDigest.js");
$packed = Minify_YUICompressor::minifyJs($script);
echo $packed;


致謝與修改過程

YUI Compressor雖然一般是要透過Java以指令列的方式運作,不過多虧了minify專案開發了Minify_YUICompressor.php,讓我們得以輕易地以PHP使用YUI Compressor。

然而由於原本的Minify_YUICompressor.php需要將YUI Compressor跟暫存目錄指定為絕對路徑,我覺得不是很好用,所以將暫存目錄改為系統自訂的暫存目錄、YUI Compreesor改為跟Minify_YUICompressor.php相同的目錄,讓我們只要把兩個檔案擺在一起就能夠使用。這樣在程式碼轉移的時候特別方便,例如將PHP系統從Windows轉移到Linux的時候。

結語:最好搭配快取機制一起使用

YUI Compressor的壓縮功能雖然挺好用的,搭配上Minify程式之後就更容易讓PHP取用,但是運作效率卻有待堪慮。我在Windows環境中請YUI Compressor壓縮1MB左右的JavaScript的時候,通常會延遲個3秒鐘左右才完成。儘管這是因為我檔案太大的關係,但是如果太過頻繁的壓縮,恐怕仍會帶來效率上的問題。

我建議在使用YUI Compressor的時候,同時搭配一些快取機制(cache),將YUI Compressor的壓縮結果另存為一個靜態的JavaScript或CSS程式碼。下次就能讓系統直接讀取壓縮結果,而不需要經過YUI Compressor的壓縮。

0 意見:

留言工具: