如何壓縮javascript代碼體積

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

　　隨著前端的發展，特別是React，Vue等構造單頁應用的興起，前端的能力得以很大提升，隨之而來的是項目的復雜度越來越大。此時的前端的靜態資源也越來越龐大，而毫無疑問javascript資源已是前端的主體資源，對于壓縮它的體積至為重要。

　　js壓縮的重要性

　　為什么說更小的體積很重要呢：更小的體積對于用戶體驗來說意味著更快的加載速度以及更好的用戶體驗，這也能早就企業更大的利潤。另外，更小的體積對于服務器來說也意味更小的帶寬以及更少的服務器費用。

　　前端構建編譯代碼時，可以使用webpack中的optimization.minimizer來對代碼進行壓縮優化。但是我們也需要了解如何它是壓縮代碼的，這樣當在生產環境的控制臺調試代碼時對它也有更深刻的理解。

　　如何壓縮js代碼體積？

　　去除多余字符:空格，換行及注釋

　　//對兩個數求和
　　functionsum(a,b){
　　returna+b;
　　}

　　先把一個抽象的問題給具體化，如果是以上一段代碼，那如何壓縮它的體積呢:

　　此時文件大小是62Byte，一般來說中文會占用更大的空間。

　　多余的空白字符會占用大量的體積，如空格，換行符，另外注釋也會占用文件體積。當我們把所有的空白符合注釋都去掉之后，代碼體積會得到減少。

　　去掉多余字符之后，文件大小已經變為30Byte。壓縮后代碼如下:

　　functionsum(a,b){returna+b}

　　替換掉多余字符后會有什么問題產生呢？

　　有，比如多行代碼壓縮到一行時要注意行尾分號。這就需要通過以下介紹的AST來解決。

　　壓縮變量名：變量名，函數名及屬性名

functionsum(first,second){
　　returnfirst+second;
　　}

　　如以上first與second在函數的作用域中，在作用域外不會引用它，此時可以讓它們的變量名稱更短。但是如果這是一個module中，sum這個函數也不會被導出呢？那可以把這個函數名也縮短。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“如何壓縮javascript代碼體積”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!