JavaScript - Minify JavaScript檔案

一般我們使用第三方的JS元件時會去下載第三方提供的JS檔，通常會發現載下來的檔案有.js檔和.min.js檔兩種不同的檔案，檔名都是一樣的，且不管引用哪一個檔案結果都是一樣，例如使用JQuery時，你可以引用jquery-1.9.0.js或jquery-1.9.0.min.js。究竟.min的檔案代表的是什麼意思呢?

其實.min檔案代表Minify化的JavaScript檔，意思就是將原有的JavaScript檔案內容的註解, 換行字元, 排版...等刪掉，變數命名也採用最佳化命名，所以你打開.min的檔案會發現檔案內容和原有的相比是非常的亂的，但檔案大小相對的也比原有檔案還小。
那究竟要怎麼去Minify JavaScript檔呢?其實很簡單，只要Google一下就可以發現有許多提供Minify JavaScript檔案的工具。在這裡限量要介紹一套Google提供的Minify工具，因為是Google的，所以有一定的品質保證，廢話不多說，馬上來看看這套工具。

Closure Compiler是Google所提供的Minify JavaScript檔的工具，Google提供Closure Compiler的工具UI使用網站(在這裡)，除此之外也提供了Library(JAR檔)與Service API讓開發人員使用，底下限量使用Closure Compiler說明網站所提供的範例JavaScript檔案進行Minify。

在上圖中，可以看到原本的JavaScript內容是如此的冗長，而右邊Minify後的內容只剩下幾行而已，想必檔案大小也會縮減。

再來下面限量使用從網站載下來的compiler.jar Library來進行Minify，這裡就用PowerShell Script來寫一個Minify的程式：
MinifyJS.ps1：

$currentPath = Get-Location
$files = Get-ChildItem -Path $currentPath\Scripts -Filter *.js
ForEach($file in $files)
{
    $baseName = [System.IO.Path]::GetFileNameWithoutExtension($file.Name)
    echo InputFile: $file.FullName
    java -jar $currentPath\compiler.jar --js $file.FullName --js_output_file $currentPath\Output\$baseName".min.js"
    echo "Output File: "$currentPath"\Output\"$baseName".min.js"
}

說明：以下為程式執行的大概流程，首先取得目前的執行路徑，接著取出目前路徑裡Scripts資料夾內副檔名為js的所有檔案，然後再Minify每個JS檔案。
下圖為程式目錄結構：

執行結果：

最後可以將兩個檔案比較一下，上面範例的JS原始檔大小為1.22KB，經過Minify後的檔案只剩下530Byte，大幅減少了空間，所以如果你的JS檔寫的又臭又長，在釋出之前要先Minify，這樣才不會讓整個專案的整體大小變大。



參考來源：
Closure Tools - Google