:::

使用Minify壓縮JavaScript跟CSS範例

image

Minify是用來壓縮JavaScritp跟CSS的PHP 5應用程式。跟我之前介紹的YUI Compressor壓縮器功能類似,但是YUI Compressor是Java程式,沒有Minify原生整合PHP來得方便。Minify目前最新版本為2.1.5,你可以在GitHub找到它全部的原始碼。

Minify功能很多很複雜,但是它自己的使用手冊中卻沒有提到怎樣簡單地在PHP使用。這篇就是簡單地寫個範例,讓大家知道要怎麼用Minify來壓縮JavaScript跟CSS。


下載檔案

image

你可以在GitHub找到Minify的所有原始碼,請按下「ZIP」下載檔案。

壓縮範例

我這篇的用法中,JavaScript跟CSS都是以PHP變數的形式儲存再來進行壓縮。Minify主要的用法是壓縮既有的JavaScript與CSS檔案,但是我比較常將各個檔案整理、組合、排列,然後再壓縮,這也是這兩個範例的主要作法。

壓縮JavaScript
<?php

/**
* --------
* JavaScript Compressor
* --------
*/

$js = "
/**
* This is a demo script
*/
function test() {
var _test_ms = '1';
alert(_i);
}
"
;

require_once './min/lib/JSMinPlus.php';

$packed_js = JSMinPlus::minify($js);

echo $packed_js; //function test(){var _test_ms='1';alert(_i)}

?>

壓縮CSS
<?php

/**
* --------
* CSS Compressor
* --------
*/

$css = "
/**
* This is a demo css
*/
body hi {
font-size: 3em;
/* font-weight: bold; */
color: #666666;
}
"
;

require_once './min/lib/CSSmin.php';

$cssmin = new CSSmin();
$packed_css = $cssmin->run($css);

echo $packed_css; //body hi{font-size:3em;color:#666}

?>

注意:不是任何JavaScript都能壓縮

然而,Minify壓縮法跟YUI Compressor還是不一樣。如果JavaScript已經是壓縮好的程式,那麼Minify再壓縮之後通常就會發生錯誤。

另外,有些程式碼是專門寫好給YUI Compressor壓縮的,所以用Minify壓縮時就會發生錯誤。這時候要嘛就是找線上的YUI壓縮服務,要嘛就是自己裝個YUI Compressor來壓縮。


結語:原生的Minify比Java的YUI Compressor好用

我之前改用YUI Compressor壓縮的時候常常會發生錯誤,這是由於PHP並非多線程設計,一旦網站大量對PHP請求的時候,PHP就會傻傻地去呼叫YUI Compressor的Java程式,然後Java就會快速地吃光伺服器的CPU跟記憶體,最後伺服器當機。即使我之前用PHPLock跟設計快取機制,這個問題還是很難根治。

然而跟使用Java的YUI Compressor相比,Minify原生於PHP的運作效率並不差,甚至可以說更好。到目前為止運作都蠻順暢的。而大量請求網頁的時候仍會出錯,那也是PHP自身設定就能夠搞定,不用像是使用YUI Compressor的時候還要去研究Java的環境設定。

最後發個牢騷,我還是覺得Java太容易當機了,不論是這邊用Java跑YUI Compressor,還是Tomcat上運作DSpace,Java太容易吃光記憶體跟佔用大量CPU,這讓我感到非常困擾。(即使設定了Xms跟Xmx還是很容易當機!)即使如此,用Java開發Servlet網站服務的專案還是很多,大家到底是怎麼面對這種問題的啊?我很好奇!