用 JSMin 壓縮你的 JavaScript 檔案

在網頁中動態載入的 JavaScript 對於頁面顯示的速度影響甚多，不得不注意！

尤其是很多人習慣把 JavaScript include 寫在 區塊中，這樣一來最大的問題就是 Browser 必須要等到 JavaScript 全部讀完後才會開始顯示網頁，如果你像信義房屋這樣，讀一個首頁要下載 18 個 JavaScript 外部檔且「沒有大頻寬」的話，首頁就要等這 18 個 JavaScript 下載完才會開始顯示網頁，在這之前使用者就只會看到白白的一片畫面！

所以我有兩個建議：

1. 建議儘量將 JavaScript 擺在 之前

2. 建議將所有外部的 JavaScript 檔案都先「瘦身」過！

至於瘦身的話，我是習慣用 JSMin 這個工具，在上線前跑一個自己寫的批次檔將所有 *.js 檔壓縮過再傳到網站上，這樣至少可以減少一些檔案下載的時間。

你可到這個網站 ( http://www.crockford.com/javascript/jsmin.html ) 下載 jsmin.exe 檔，使用方法是：

C:\> jsmin.exe > 輸出.js < 引入.js

這樣就可以將 fulljslint.js 壓縮後儲存到 jslint.js 檔案了，但要切記不要輸入與輸出用相同的檔名，這會把你的檔案內容給清空！！

而我自己是寫了一組 Batch 檔 (*.bat) 做批次壓縮的動作。

第一支：RunJSMin.bat ( 下列的檔案請換成你們自己的 js 檔 )

@echo off

SET JSDir=Website\js

CALL JsMinfy.bat %JSDir% common.js
CALL JsMinfy.bat %JSDir% debug.js
CALL JsMinfy.bat %JSDir% flashfix.js
CALL JsMinfy.bat %JSDir% jquery.cookie.js
CALL JsMinfy.bat %JSDir% png_transparent.js
CALL JsMinfy.bat %JSDir% swfobject.js

第二支： JsMinfy.bat

@REM 此檔是給 RunJSMin.bat 呼叫用的
@REM 第一個參數是要壓縮的 JavaScript 所在目錄
@REM 第二個參數是要壓縮的 JavaScript 檔名

set DirName=%1
set FileName=%2

jsmin.exe < %DirName%\%FileName% > %DirName%\compressed.%FileName%
del /F %DirName%\%FileName%
ren %DirName%\compressed.%FileName% %FileName%

jsmin-php下載

在開發網站的過程中，修改代碼進行合併和縮小化應該是 一個額外的，單獨的步驟。在開發過程中，你因該使用多個.js文件，只要你覺得順手就行，當你的網站準備開通的時候，你就將合併過的，縮小過的版本代替原 來的。你可以開發一個工具來完成這個。下面，我已經引入了一個例子，這個例子中的小程序就會完成這個功能。它是一個命令行的腳本，使用的是JSMin的 PHP端口。
<?php
include 'jsmin.php';
array_shift($argv);
foreach ($argv AS $file) {
echo '/* ', $file, ' */';
echo JSMin::minify(file_get_contents($file)), "\n";
}
?>

你可以將它保存為compress.php，以下面的方式運行：
$ php compress.php source1.js source2.js source3.js > result.js