這么多年來(lái)，Web開(kāi)發(fā)人員都被告知應(yīng)優(yōu)化他們生產(chǎn)環(huán)境的代碼。傳統(tǒng)的方法是將應(yīng)用程序的所有腳步進(jìn)行壓縮以減少應(yīng)用程序的大小，以便讓?xiě)?yīng)用程序加載更快。而Sencha Cmd這么多年以來(lái)已經(jīng)將這個(gè)過(guò)程自動(dòng)化了。
站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到瑯琊網(wǎng)站設(shè)計(jì)與瑯琊網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站制作、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名注冊(cè)、虛擬空間、企業(yè)郵箱。業(yè)務(wù)覆蓋瑯琊地區(qū)。
然而，許多客戶，還不知道可通過(guò)調(diào)整Sencha Cmd的壓縮代碼來(lái)進(jìn)行一些額外的處理。盡管Sencha Cmd默認(rèn)是適應(yīng)YUI壓縮來(lái)進(jìn)行壓縮的，但還可以通過(guò)配置使用Google Closure或UglifyJS來(lái)進(jìn)行壓縮。下面將會(huì)介紹這些，并去測(cè)試哪一個(gè)壓縮工具提供了最大的壓縮效果。
要注意的是，本文的本意并不是讓你使用某個(gè)特定的工具，至于選擇哪一種，不選擇哪一種，是有許多的因素決定的，本文只是嘗試提供一些參考意見(jiàn)。
雖然腳本壓縮的處理機(jī)制相當(dāng)復(fù)雜，但總的來(lái)說(shuō)還是相當(dāng)簡(jiǎn)單的：代碼會(huì)被標(biāo)記后解析為一個(gè)抽象語(yǔ)法樹(shù)（abstract syntax tree，AST），然后通過(guò)腳本程序進(jìn)行修改并壓縮后輸出。
雖然這些獨(dú)立的工具是如何工作的(如使用什么算法等)已經(jīng)超出了本文的范圍，但還是讓我們?cè)诟叩膶蛹?jí)上來(lái)快速體驗(yàn)一下YUI壓縮、Closure和UglifyJS。
YUI壓縮是一個(gè)使用JAVA編寫(xiě)的命令行工具，它既可以處理Javascript，也可以處理CSS壓縮，對(duì)于大多數(shù)項(xiàng)目來(lái)說(shuō)，它是一個(gè)理想的工具。YUI壓縮雖然很受歡迎，但已經(jīng)不再更新了。
如前文所述，Sencha Cmd默認(rèn)是使用YUI壓縮來(lái)處理應(yīng)用程序的生成過(guò)程的。
Google Closure編譯器也是使用JAVA創(chuàng)建的，不過(guò)它只能處理javascript壓縮（不包含CSS）。Closure可以直接從命令行運(yùn)行，它還包含其他的一些服務(wù)（UI和API），并通過(guò)代碼注釋和編譯標(biāo)志為壓縮處理提供了更多的控制權(quán)。
UglifyJS是這些工具中唯一使用javascript編寫(xiě)的工具，因此非常適合應(yīng)用于Node.js環(huán)境中。如Closure一 樣，UglifyJS只提供javascript壓縮（不包括CSS）。UglifyJS是以命令行工具方式運(yùn)行的，并允許通過(guò)大量的編譯標(biāo)志來(lái)精細(xì)的控 制壓縮過(guò)程。
注意：Sencha Cmd是使用JAVA創(chuàng)建的，而UglifyJS的運(yùn)行需要使用到Rhino，而不是Node.js。
要記住的是，因?yàn)槊恳粋€(gè)工具會(huì)產(chǎn)生不同的壓縮輸出，因而很難預(yù)測(cè)哪一個(gè)是最理想的結(jié)果。為了說(shuō)明這一點(diǎn)，下面將通過(guò)一個(gè)示例應(yīng)用程序來(lái)測(cè)試這些壓縮工具如何去處理這些代碼。
最簡(jiǎn)單的用來(lái)說(shuō)明這一概念的方式就是使用Sencha Cmd來(lái)生產(chǎn)一個(gè)示例應(yīng)用程序：
sencha -sdk ~/path/to/ext generate app Foo ./foo
因?yàn)镾encha Cmd自身能搭建一個(gè)完整的示例應(yīng)用程序，因而我們不需要做任何事情。在Firefox打開(kāi)應(yīng)用程序，在“開(kāi)發(fā)”模式中應(yīng)用程序的加載數(shù)據(jù)統(tǒng)計(jì)如下：
這里沒(méi)有太多驚喜，在“開(kāi)發(fā)”模式中的Ext JS 應(yīng)用程序依賴于Ext.Loader來(lái)同步加載每一個(gè)Javascript依賴，雖然只花費(fèi)了0.29秒來(lái)等待24個(gè)HTTP請(qǐng)求，但可以想象得出一個(gè)企業(yè)應(yīng)用程序可能需要花費(fèi)更多的時(shí)間。
在運(yùn)行”sencha app build”將示例應(yīng)用程序轉(zhuǎn)為“生產(chǎn)”模式后，網(wǎng)絡(luò)統(tǒng)計(jì)已經(jīng)有所改變了：
很顯然，現(xiàn)在只加載了很小的腳本資源，而整體的加載時(shí)間已經(jīng)降至0.02秒了。這一切都得感謝javascript壓縮的魔力。
顯然，使用javascript壓縮是很重要的，不過(guò)，通過(guò)調(diào)整Sencha Cmd的設(shè)置可以獲得更好的結(jié)果嗎？如果要修改Sencha Cmd所使用的壓縮工具，可編輯app.json文件：
重慶分公司
重慶分公司
{ //...
/**
* override objects for setting build environment specific
* settings.
*/
"production": { "compressor" : { //"type" : "yui" //the default...
//"type" : "uglify" //or...
"type" : "closure"
}
}, //...
}1234567891011121314151617現(xiàn)在運(yùn)行“sencha app build”，將會(huì)使用配置的壓縮工具。接下來(lái)，讓我們來(lái)看看使用不同壓縮工具后的示例應(yīng)用程序是如何的：
| 壓縮工具 | 文件大小(字節(jié)) | 與源文件比較（%） |
|---|---|---|
| (none) | 5,166,339 | 100.0% |
| YUI | 1,109,534 | 21.48% |
| Closure | 1,081,242 | 20.93% |
| UglifyJS | 1,069,126 | 20.69% |
| YUI (gzip) | 343,696 | 6.65% |
| Closure (gzip) | 323,615 | 6.26% |
| UglifyJS (gzip) | 329,182 | 6.37% |
在以上表格中，可以看到壓縮文件的大小，另外一部分是使用gzip壓縮后的輸出文件（通過(guò)gzip終端命令使用默認(rèn)設(shè)置的運(yùn)行結(jié)果）。從結(jié)果可以看到，使用UglifyJS可以輸出最小的文件，而如果考慮gzip壓縮，則Closure更佳。
如果調(diào)整gzip的設(shè)置，可能會(huì)獲得更好的結(jié)果。
由于Closure贏了，我們是否只是有Closure呢？可悲的是，其實(shí)并不是那么明確的。
如果采用額外的步驟來(lái)衡量所生產(chǎn)應(yīng)用程序過(guò)程的總時(shí)間（包括生產(chǎn)CSS主題和其他步驟），就會(huì)注意到一些重要的事情。
示例應(yīng)用程序使用的是Ext JS 5.0.1.1255，是在MacBook Pro（2011年初，OSX 10.10.1, 2GHz Intel i7, 8GB RAM）上使用Sencha Cmd 5.1.0.26進(jìn)行壓縮的。如果在你的機(jī)器上可能會(huì)有不同的結(jié)果。要注意的是，我修改過(guò)生成設(shè)置，以避免主題為舊的瀏覽器進(jìn)行切片.
sencha -ti app build -c
以上命令會(huì)為我們提供執(zhí)行的總時(shí)間（-ti 標(biāo)志）,b并會(huì)刪除之前生成的輸出（-c 標(biāo)志）以保證壓縮是一個(gè)干凈壓縮。為每一個(gè)壓縮工具運(yùn)行一次生產(chǎn)，就可以看到為什么YUI壓縮是默認(rèn)選擇了：
YUI: 0:00:33
Closure: 0:00:54
UglifyJS: 0:15:40
Closure花費(fèi)了近兩倍的時(shí)間去壓縮生成的輸出，而UglifyJS則需要31x這么長(zhǎng)的時(shí)間！這里要點(diǎn)就是，是否值得為幾千字節(jié)的問(wèn)題而花費(fèi)大量增加的生產(chǎn)時(shí)間。
歸根結(jié)底，一些公司的首要目標(biāo)只是減少javascript的大小，而并注重哪幾千字節(jié)。不過(guò)，對(duì)于高流量應(yīng)用程序，則會(huì)讓他們更關(guān)注這些微小的細(xì)節(jié)，因?yàn)轫?yè)面的速度和總體帶寬可能會(huì)大大影響利潤(rùn)。
最后，你可能會(huì)問(wèn)任何壓縮過(guò)的javascript代碼執(zhí)行上是否會(huì)更快。這幾乎是不可能的事，現(xiàn)有的JSPerf測(cè)試表明，執(zhí)行速度幾乎是沒(méi)有任何差別的。
Sencha Cmd目前還不允許去配置YUI壓縮的配置，不過(guò)YUI本身也沒(méi)有提供更多的配置。Sencha Cmd目前允許用戶配置Closure去如何壓縮代碼。
再次打開(kāi)app.json，在文件中科直接通過(guò)“compressor”對(duì)象來(lái)配置Closure的壓縮選項(xiàng)：
{ //...
"production": { "compressor" : { "type" : "closure", //all other keys are passed as options
"ambiguateProperties" : true, "foldConstants" : true
}
}, //...}123456789101112131415Sencha Cmd目前還沒(méi)有實(shí)現(xiàn)UglifyJS的自定義配置，不過(guò)該功能已包含在路線圖中。
壓縮javascript是既定的提高Web應(yīng)用程序性能的最佳做法。Sencha Cmd默認(rèn)情況下會(huì)自動(dòng)進(jìn)行處理，不過(guò)，使用更先進(jìn)的設(shè)置來(lái)對(duì)生成的產(chǎn)品進(jìn)行額外的優(yōu)化，是值得的。
**作者： Arthur Kay
Arthur Kay is a Senior Software Engineer at Sencha. He studied Music and
Computer Science at Loyola University Chicago and has been involved
with the Web since the late 1990s.**
