电竞比分网-中国电竞赛事及体育赛事平台

分享

壓縮JavaScript的宏 - Truly - 博客園

 xnet 2007-01-17

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

大家知道,我們?cè)诰帉慗avaScript的時(shí)候,通常為了是代碼更具可讀性,因此增加了很多空格和tab控制符以及很多注釋。但是,對(duì)應(yīng)腳本解釋器來(lái)講,這些是沒(méi)有什么實(shí)際意義的,而這些字符缺占據(jù)了總體積的1/3以上甚至超過(guò)1半,是時(shí)候該對(duì)腳本文件進(jìn)行減肥了。

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

我們首先打開(kāi)要壓縮的JS文件,然后點(diǎn)擊宏(Macros)-》選擇可以壓縮的宏-》運(yùn)行,就可以把大部分無(wú)用字符刪除了。

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

//去除遞進(jìn)
document.selection.Replace("^\\s*\\t*","",eeFindNext | eeFindReplaceCase | eeFindReplaceEscSeq | eeReplaceAll | eeFindReplaceOnlyWord | eeFindReplaceRegExp);


//去除注釋
document.selection.Replace("://",":$$$",eeFindNext | eeFindReplaceCase | eeFindReplaceEscSeq | eeReplaceAll | eeFindReplaceOnlyWord );
document.selection.Replace(
"//.*","",eeFindNext | eeFindReplaceCase | eeFindReplaceEscSeq | eeReplaceAll | eeFindReplaceOnlyWord | eeFindReplaceRegExp);
document.selection.Replace(
":$$$","://",eeFindNext | eeFindReplaceCase | eeFindReplaceEscSeq | eeReplaceAll | eeFindReplaceOnlyWord );
//去除空行
document.selection.Replace("\\n\\n","\\n",eeFindNext | eeFindReplaceCase | eeFindReplaceEscSeq | eeReplaceAll | eeFindReplaceOnlyWord );
document.selection.Replace(
"\\n\\n","\\n",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(
"\\s*\\t*\\n\\}","\\}",eeFindNext | eeFindReplaceCase | eeFindReplaceEscSeq | eeReplaceAll | eeFindReplaceOnlyWord | eeFindReplaceRegExp);
document.selection.Replace(
"\\\\\\s*\\t*\\n","",eeFindNext | eeFindReplaceCase | eeFindReplaceEscSeq | eeReplaceAll | eeFindReplaceOnlyWord | eeFindReplaceRegExp);
document.selection.Replace(
"else\\s*\\t*\\n","else ",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);

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

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

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

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類似文章 更多