這篇文章主要介紹了如何壓縮javascript代碼體積,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。

隨著前端的發(fā)展,特別是React,Vue等構(gòu)造單頁應(yīng)用的興起,前端的能力得以很大提升,隨之而來的是項(xiàng)目的復(fù)雜度越來越大。此時(shí)的前端的靜態(tài)資源也越來越龐大,而毫無疑問javascript資源已是前端的主體資源,對(duì)于壓縮它的體積至為重要。
js壓縮的重要性
為什么說更小的體積很重要呢:更小的體積對(duì)于用戶體驗(yàn)來說意味著更快的加載速度以及更好的用戶體驗(yàn),這也能早就企業(yè)更大的利潤。另外,更小的體積對(duì)于服務(wù)器來說也意味更小的帶寬以及更少的服務(wù)器費(fèi)用。
前端構(gòu)建編譯代碼時(shí),可以使用webpack中的optimization.minimizer來對(duì)代碼進(jìn)行壓縮優(yōu)化。但是我們也需要了解如何它是壓縮代碼的,這樣當(dāng)在生產(chǎn)環(huán)境的控制臺(tái)調(diào)試代碼時(shí)對(duì)它也有更深刻的理解。
如何壓縮js代碼體積?
去除多余字符:空格,換行及注釋
//對(duì)兩個(gè)數(shù)求和
functionsum(a,b){
returna+b;
}先把一個(gè)抽象的問題給具體化,如果是以上一段代碼,那如何壓縮它的體積呢:
此時(shí)文件大小是62Byte,一般來說中文會(huì)占用更大的空間。
多余的空白字符會(huì)占用大量的體積,如空格,換行符,另外注釋也會(huì)占用文件體積。當(dāng)我們把所有的空白符合注釋都去掉之后,代碼體積會(huì)得到減少。
去掉多余字符之后,文件大小已經(jīng)變?yōu)?0Byte。壓縮后代碼如下:
functionsum(a,b){returna+b}替換掉多余字符后會(huì)有什么問題產(chǎn)生呢?
有,比如多行代碼壓縮到一行時(shí)要注意行尾分號(hào)。這就需要通過以下介紹的AST來解決。
壓縮變量名:變量名,函數(shù)名及屬性名
functionsum(first,second){
returnfirst+second;
}如以上first與second在函數(shù)的作用域中,在作用域外不會(huì)引用它,此時(shí)可以讓它們的變量名稱更短。但是如果這是一個(gè)module中,sum這個(gè)函數(shù)也不會(huì)被導(dǎo)出呢?那可以把這個(gè)函數(shù)名也縮短。
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“如何壓縮javascript代碼體積”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司,,關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來學(xué)習(xí)!
網(wǎng)頁標(biāo)題:如何壓縮javascript代碼體積-創(chuàng)新互聯(lián)
當(dāng)前路徑:http://chinadenli.net/article8/digcip.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供動(dòng)態(tài)網(wǎng)站、標(biāo)簽優(yōu)化、App開發(fā)、軟件開發(fā)、網(wǎng)站策劃、網(wǎng)站排名
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容