The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

上線前用 JSMin 壓縮你的 JavaScript 檔案

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

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

所以我有兩個建議:

1. 建議盡量將 JavaScript 擺在 </body> 之前

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

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

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

 C:\> jsmin.exe < fulljslint.js > jslint.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%

其他相關工具/連結