寫前端的相信都遇到過要提高網頁的性能,其中javascript文件越小,瀏覽器的下載速度面對文件的讀取和解析就更快。而一般我們在開發又需要一定的代碼規範來使我們的代碼更加的容易維護和讀懂,但是大量空格和換行又會加大文件的大小,所以在發佈時進行縮編或者混淆可以減小javascript的大小,提高效率。 ...
寫前端的相信都遇到過要提高網頁的性能,其中javascript文件越小,瀏覽器的下載速度面對文件的讀取和解析就更快。而一般我們在開發又需要一定的代碼規範來使我們的代碼更加的容易維護和讀懂,但是大量空格和換行又會加大文件的大小,所以在發佈時進行縮編或者混淆可以減小javascript的大小,提高效率。
一、縮編
縮編就是去掉javascript代碼中的空格和換行符,從而減小文件大小的目的。我們可以使用JSMin來進行代碼縮編。
JSMIN的安裝
- 安裝node
- 安裝npm
安裝JSMIN
命令行:npm install -g jsmin
(相信現在的前端對node應該都是不陌生的,這裡我就不做詳細介紹,如果沒瞭解過的建議去學一學)
JSMIN的使用
命令:jsmin -o 新文件名.js 要執行的js文件.js
例如:jsmin -o jsmin.js bootstrap.js
這裡我用了bootstrap沒有壓縮過的bootstrap.js文件,可以看到,小了31.9%。
二、混淆
混淆是比更加高級的一種優化js代碼的方法,他不僅能夠去掉空格和換行,他還把一些全局變數或者是全局函數的名字重新定義為簡短的名稱。我們可以使用UglifyJS來進行代碼混淆
UglifyJS的安裝
- 安裝node
- 安裝npm
安裝UglifyJS
命令行:npm install -g uglify-js
(又是node了,你知道它多方便了沒-。-)
UglifyJS的使用
UglifyJS我主要兩種使用,第一種是直接-o屬性,和jsmin差不多,就去掉空格和換行。還是用bootstrap。
命令:uglifyjs 要執行的文件.js -o 生成的文件名.js
例如:uglifyjs bootstrap.js -o uglifyjs.js
可以看到也是減小了,但是和jsmin的效果是差不多的。
第二種是加-m屬性的,這個屬性可以讓一些變數被重命名,這樣將大大的減少js文件的大小。還是用bootstrap.js來實驗。(-o後面一定要跟生成的文件)
命令:uglifyjs 要執行的文件.js -m -o 生成的文件名.js
例如:uglifyjs bootstrap.js -o uglifyjs.js
可以看到縮小了44.9%,比前兩個縮小了更加多的大小。
三、總結:
這就是縮小js大小的兩個方法,對於小的js文件來說,用什麼其實差不多,對於比較龐大的js文件,那時用最後的方法比較的好。但是要求你的代碼有一定要求,才不會再被進行重命名後引起了變數的衝突。還有一種GCC(Google Closure Compiler),這種可以更加的縮小js代碼的量,更大規模更加的明顯。但是我技術還差點,沒法使用。
https://closure-compiler.appspot.com/home(可能需要FQ)
這個網址就是GCC壓縮的網站。之所以不使用他一個原因是要FQ,還有一個原因是對代碼的規範要求高,GCC在壓縮之後破壞了原來了代碼,如果沒有很好的代碼規範,將導致js文件出錯。有興趣的可以去百度一下。