壓縮JavaScript的宏 - Truly - 博客園

xnet 2007-01-17

展開全文

編者按：現(xiàn)在開發(fā)Web應用程序時，尤其是使用了無刷新技術(shù)的應用程序，JavaScript文件成為一種必不可少的組成部分。大量的函數(shù)和代碼被轉(zhuǎn)移到客戶端腳本文件中，使得腳本文件的體積急劇膨脹。

大家知道，我們在編寫JavaScript的時候，通常為了是代碼更具可讀性，因此增加了很多空格和tab控制符以及很多注釋。但是，對應腳本解釋器來講，這些是沒有什么實際意義的，而這些字符缺占據(jù)了總體積的1/3以上甚至超過1半，是時候該對腳本文件進行減肥了。

在筆者的工作中，也經(jīng)常遇到一些腳本的處理，為了使程序獲得更好的性能，減少網(wǎng)絡(luò)傳輸數(shù)據(jù)，減輕服務器壓力，需要對腳本進行一個處理。這里我以我所使用的文本編輯器EmEditor來說明如何為JavaScript腳本文件進行壓縮，這個過程主要是靠EmEditor的宏功能實現(xiàn)的，宏是一個很常用的技術(shù)，很多編輯器和集成開發(fā)工具IDE都支持的。

我們首先打開要壓縮的JS文件，然后點擊宏（Macros）－》選擇可以壓縮的宏－》運行，就可以把大部分無用字符刪除了。

具有壓縮功能的宏（EmEditor使用）內(nèi)容如下，請保存為.jsee文件，或者直接點擊這里下載。

//去除遞進

//去除注釋

document.selection.Replace("://",":$$$",eeFindNext | eeFindReplaceCase | eeFindReplaceEscSeq | eeReplaceAll | eeFindReplaceOnlyWord );

document.selection.Replace(":$$$","://",eeFindNext | eeFindReplaceCase | eeFindReplaceEscSeq | eeReplaceAll | eeFindReplaceOnlyWord );

//去除空行

document.selection.Replace("\\n\\n","\\n",eeFindNext | eeFindReplaceCase | eeFindReplaceEscSeq | eeReplaceAll | eeFindReplaceOnlyWord );

//去除換行

document.selection.Replace("\\}\\s*\\t*\\n","\\}",eeFindNext | eeFindReplaceCase | eeFindReplaceEscSeq | eeReplaceAll | eeFindReplaceOnlyWord | eeFindReplaceRegExp);

document.selection.Replace("\\{\\s*\\t*\\n","\\{",eeFindNext | eeFindReplaceCase | eeFindReplaceEscSeq | eeReplaceAll | eeFindReplaceOnlyWord | eeFindReplaceRegExp);

document.selection.Replace("\\s*\\t*\\n\\{","\\{",eeFindNext | eeFindReplaceCase | eeFindReplaceEscSeq | eeReplaceAll | eeFindReplaceOnlyWord | eeFindReplaceRegExp);

document.selection.Replace("\\s*\\t*\\n\\}","\\}",eeFindNext | eeFindReplaceCase | eeFindReplaceEscSeq | eeReplaceAll | eeFindReplaceOnlyWord | eeFindReplaceRegExp);

//去除空格

document.selection.Replace(" == ","==",eeFindNext | eeFindReplaceCase | eeFindReplaceEscSeq | eeReplaceAll | eeFindReplaceOnlyWord );

document.selection.Replace(" += ","+=",eeFindNext | eeFindReplaceCase | eeFindReplaceEscSeq | eeReplaceAll | eeFindReplaceOnlyWord );

document.selection.Replace(" -= ","-=",eeFindNext | eeFindReplaceCase | eeFindReplaceEscSeq | eeReplaceAll | eeFindReplaceOnlyWord );

document.selection.Replace(" *= ","*=",eeFindNext | eeFindReplaceCase | eeFindReplaceEscSeq | eeReplaceAll | eeFindReplaceOnlyWord );

document.selection.Replace(" /= ","/=",eeFindNext | eeFindReplaceCase | eeFindReplaceEscSeq | eeReplaceAll | eeFindReplaceOnlyWord );

document.selection.Replace(" != ","!=",eeFindNext | eeFindReplaceCase | eeFindReplaceEscSeq | eeReplaceAll | eeFindReplaceOnlyWord );

document.selection.Replace(" > ",">",eeFindNext | eeFindReplaceCase | eeFindReplaceEscSeq | eeReplaceAll | eeFindReplaceOnlyWord );

document.selection.Replace(" < ","<",eeFindNext | eeFindReplaceCase | eeFindReplaceEscSeq | eeReplaceAll | eeFindReplaceOnlyWord );

document.selection.Replace(" + ","+",eeFindNext | eeFindReplaceCase | eeFindReplaceEscSeq | eeReplaceAll | eeFindReplaceOnlyWord );

document.selection.Replace(" - ","-",eeFindNext | eeFindReplaceCase | eeFindReplaceEscSeq | eeReplaceAll | eeFindReplaceOnlyWord );

document.selection.Replace(" * ","*",eeFindNext | eeFindReplaceCase | eeFindReplaceEscSeq | eeReplaceAll | eeFindReplaceOnlyWord );

document.selection.Replace(" && ","&&",eeFindNext | eeFindReplaceCase | eeFindReplaceEscSeq | eeReplaceAll | eeFindReplaceOnlyWord);

document.selection.Replace(" || ","||",eeFindNext | eeFindReplaceCase | eeFindReplaceEscSeq | eeReplaceAll | eeFindReplaceOnlyWord);

document.selection.Replace(" = ","=",eeFindNext | eeFindReplaceCase | eeFindReplaceEscSeq | eeReplaceAll | eeFindReplaceOnlyWord);

不幸的是，壓縮后的代碼由于沒有了遞進、空格等字符，變得沒有任何可讀性，所以這里推薦你在壓縮前備份一份，只有在發(fā)布版本中采用壓縮腳本，正常開發(fā)時仍然使用具有格式、注釋的代碼。

事實上，如果您使用了微軟最新的ASP.NET Ajax擴展的話，會注意到微軟這個Ajax框架的客戶端類庫同樣提供了兩個版本，壓縮前和壓縮后的，通過配置腳本管理器的屬性來輸出debug或者release模式的腳本。這兩個腳本的體積差別超過1倍，debug是3vxxk，而release版本由于采用了混淆和字符刪除，被壓縮到100k左右！

本文的例子僅僅進行了壓縮，沒有混淆，通?；煜彩菈嚎s代碼的一個有效手段，方法名都被重命名為a，b，c等這樣的名字，大大減少了空間，最后要提醒大家的是，代碼壓縮是最后的一個優(yōu)化手段，能夠得到的優(yōu)化是非常有限的，而采用更好的結(jié)構(gòu)，增加重用代碼，才是王道。