我是如何初體驗uglifyjs壓縮JS的

標籤：des   style   blog   http   color   使用   

一、故事總有其背景

年末將至，很多閑適的時間，於是刷刷微博，接觸各種紛雜的資訊——美其名曰“學習”。運氣不錯，遇到了一個新名詞，uglifyjs. 據說是用來壓縮JS檔案的，據說還能最佳化JS,據說是基於node的，還據說比Google Closure Compiler更帶感，哦？激起了我的好奇心。百之穀之，喲，相關的介紹還不少。然後折騰了個把小時，基本上知道了是個怎麼回事。

我覺得吧，還是有些用的，即使是不是從事node開發的人，抽個小空，share之，於是就有了本文。人總有浮躁的時候，我也不例外，uglifyjs內部深入的運作是如何的，唉，我是有氣無力，不想去折騰，所以，本文更多是停留在應用程式層面。不過嘛，這樣反而受眾面廣一些。畢竟喜歡看《泰囧》的人要比《一代宗師》的多。

二、node相關的固定流程

凡事提及node應用，無非免不了類似下面的流程：

1. 安裝node
2. 安裝nmpnpm
3. 安裝當前應用 – uglifyjs

前兩個網上太多示意了，我之前也講過，sorry, 我很懶。
uglifyjs安裝如下code:

npm install uglify-js -g

一個斷行符號，於是啪啪啪，就有所示的東東：

於是，下面就可以壓縮JS了。

三、uglifyjs JS壓縮

uglifyjs壓縮有很多的參數，詳見其github託管項目。其中有一些選擇性參數，如下部分：

什麼美化壓縮，空格多長，變數名是否變成短名字等……您有興趣可以自己去看看，如果今天不是星期五，如果不是要趕回去買菜，我就會翻譯下的——諸位，請原諒我吧，阿門！

下面示範如何使用uglifyjs壓縮JS.

我的案頭上有個名叫formini的檔案夾，我會把要壓縮的檔案放在其中，然後再壓縮。現在，我從內部拷貝了一個名叫inet.js的JS檔案到這個檔案夾中，然後：

1. 開啟cmd, 這個不會我就沒有辦法了
2. 目錄引到formini檔案夾，cd 然後什麼什麼的，這個不會我也沒有辦法了
3. 如下代碼：

   uglifyjs inet.js -o inet-min.js

4. 再運行如下代碼，測試-m選擇性參數：

   uglifyjs inet.js -m -o inet.min.js

   如下：
   

噢啦，現在就是看結果了，見下：

90K的是沒有運行-m參數的，70K(69.4)的是啟動並執行。-m參數所以就是把變數名變成a, b, c, d, ...

從實際應用角度講，上線的JS顯然要壓縮變數，減小一定的檔案尺寸。

跟YUICompressor相比，大小隻小了0.6K, 不過網上反映uglifyjs相比YUI壓縮很明顯，我這裡的大小僅最佳化了0.6÷174=0.345%，這隻能說明我寫的代碼還算比較最佳化，哈哈（突然想起了老婆的話，不要得瑟，深呼吸……深呼吸……）！

四、uglifyjs壓縮批處理

我們不可能每次都開啟cmd去鍵入壓縮執行代碼，容易寫錯不說（如上面那個結果圖），還耗時，想想都會讓人瘋掉。懶人有懶法，花了點功夫，折騰了一個批次檔，以後，想要壓縮JS，只要雙擊運行這個.bat檔案就可以了！完整代碼如下：

@echo off:: 設定壓縮JS檔案的根目錄，指令碼會自動按樹層次尋找和壓縮所有的JSSET JSFOLDER=C:\Users\Administrator\Desktop\forminiecho 正在尋找JS檔案chdir /d %JSFOLDER%for /r . %%a in (*.js) do (    @echo 正在壓縮 %%~a ...    uglifyjs %%~fa  -m -o %%~fa)echo 完成!pause & exit

建立一個txt文檔，任意命名，將上面的代碼粘貼進去，修改JSFOLDER後面的檔案夾目錄為你自己的，然後把.txt尾碼改成.bat就可以啦！然後雙擊就可以大量使用uglifyjs壓縮JS檔案啦！

四、結束語

對於自己來講，本文內容算作備忘。目前而言，我還是uglifyjs不能壓縮CSS檔案。不過嘛，瞭解下總會有協助的。行文匆忙，文中要是有表述不準確的地方歡迎指正。

原創文章，轉載請註明來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=2946