JavaScript 檔壓縮工具 - UglifyJS

我有個特殊需求，需要一個壓縮(Minify) JavaScript 檔的指令列工具。JavaScript 壓縮工具多如牛毛，從線上轉換網站、Visual Studio 擴充套件，到 GUI 軟體工具都有，而 Gulp/Grunt 等打包工具也都有內建，由於每次只處理單一檔案，我希望安裝跟操作步驟愈簡單愈好。查到一篇頗完整的整理 - 15个最好用的JavaScript代码压缩工具，其中有 Minifier、UglifyJS 二者都可用 npm 下載，以命令列方式呼叫，UglifyJS 富有盛名，是大部分人的選擇，拿香跟著拜準沒錯。

在有安裝 node.js 的環境下指令 npm install uglify-js -g 安裝，在 DOS 視窗或 Cmder 輸入 uglifyjs 原始js檔名 -o 壓縮後檔名 就 OK 囉。我寫了一個簡單 test.js 測試，原始大小為 908 Bytes，壓縮後減少到 670 Bytes：

UglifyJS 調控參數蠻多的，但很多屬於進階功能，這裡介紹我常用的兩個基本選項。

若原始 test.js 長這樣：(908 Bytes)

//程式範例
(function () {
    //新增操作鈕
    var btnContainer = document.createElement("div");
    btnContainer.setAttribute("style",
        "position:fixed;top:6px;left:6px;z-index:9999;opacity:0.8");
    btnContainer.innerHTML = "<button id=bSimp>排版簡化</button> <button id=bNoPhoto>移除照片</button>"
    document.body.appendChild(btnContainer);
    //功能
    function hideElements(selector) {
        document.querySelectorAll(selector).forEach(function(el) {
            el.style.display = "none";
        });;

    }
    function simplifyLayout() {
        hideElements("[role=menu],aside");
    }
    function hidePhotos() {
        hideElements("figure");
    }
    //加上按鈕事件
    document.getElementById("bSimp").addEventListener("click", simplifyLayout);
    document.getElementById("bNoPhoto").addEventListener("click", hidePhotos);
})();

若不加額外參數，預設uglifyjs test.js -o test-m.min.js的壓縮結果如下：(670 Bytes)

(function(){var btnContainer=document.createElement("div");btnContainer.setAttribute("style","position:fixed;top:6px;left:6px;z-index:9999;opacity:0.8");btnContainer.innerHTML="<button id=bSimp>排版簡化</button> <button id=bNoPhoto>移除照片</button>";document.body.appendChild(btnContainer);function hideElements(selector){document.querySelectorAll(selector).forEach(function(el){el.style.display="none"})}function simplifyLayout(){hideElements("[role=menu],aside")}function hidePhotos(){hideElements("figure")}document.getElementById("bSimp").addEventListener("click",simplifyLayout);document.getElementById("bNoPhoto").addEventListener("click",hidePhotos)})();

-m (Mangle Names，修飾名稱) 可將內部變數更名成單字元，是有效的減量技巧，uglifyjs test.js -m -o test-m.min.js，空間可再減少到 533 Bytes：

(function(){var t=document.createElement("div");t.setAttribute("style","position:fixed;top:6px;left:6px;z-index:9999;opacity:0.8");t.innerHTML="<button id=bSimp>排版簡化</button> <button id=bNoPhoto>移除照片</button>";document.body.appendChild(t);function e(t){document.querySelectorAll(t).forEach(function(t){t.style.display="none"})}function n(){e("[role=menu],aside")}function o(){e("figure")}document.getElementById("bSimp").addEventListener("click",n);document.getElementById("bNoPhoto").addEventListener("click",o)})();

-c (Compress，壓縮)，將程式改為等效簡短寫法節省空間。uglifyjs test.js -m -c -o test-m.min.js：

!function(){var t=document.createElement("div");function e(t){document.querySelectorAll(t).forEach(function(t){t.style.display="none"})}t.setAttribute("style","position:fixed;top:6px;left:6px;z-index:9999;opacity:0.8"),t.innerHTML="<button id=bSimp>排版簡化</button> <button id=bNoPhoto>移除照片</button>",document.body.appendChild(t),document.getElementById("bSimp").addEventListener("click",function(){e("[role=menu],aside")}),document.getElementById("bNoPhoto").addEventListener("click",function(){e("figure")})}();

這個案例能靠換寫法瘦身的地方不多，只降低 7 Bytes 縮到 526 Bytes。另外補個示範，-c 壓縮可使用 if (cond) a=1; else a=2; 轉成 a = cond ? 1 : 2，if (boolCond) doSomething() 轉成 boolCond&&doSomething() 等常見 JavaScript 程式簡化技巧強力瘦身：

UglifyJS 還有很多進階控制，例如物件屬性更名、排除特定變數或函式名稱不被更名(若程式壓縮後壞掉時就很有用)，完整介紹可以參考文件。

Tips of using UglifyJs to minify .js with command line.