Jquery學習之Uglify壓縮工具

2021-06-19 09:49:44 字數 967 閱讀 7596

uglify使用

web開發往往離不開大量的js,有過開發經驗的童鞋都知道,有時候乙個頁面會載入乙個或者多個js檔案。

這樣的後果就是造成頁面的響應事件十分的緩慢。這個時候就到我們的主題了,壓縮js檔案縮加快家族的速度。

在jquery1.5出來的時候,john說jquery已經採用了uglify進行壓縮,效果非常的好。聽說很黃很暴力。

1.uglify是基於node的伺服器壓縮工具所以第一步我們需要配置node環境:

2.安裝uglifyjs

執行cmd輸入一下命令

npm install uglify-js -g

然後就好扒拉扒拉啪啦出現一大堆的東西,最後就ok啦。

3.檢測是否安裝成功

檢測node是否安裝成功在cmd中輸入:

node -v

如果出現版本號,那麼證明安裝成功。

再測試uglify是否安裝成功在cmd中輸入:

npm如果出現一大堆提示證明安裝成功。

4.開始壓縮js檔案

好了,讓我們來壓縮檔案吧。

檔案壓縮三部曲:

第一步,cmd命令視窗,切換到js所在的目錄

第二步,輸入命令 uglifyjs [js檔名] -m -o [壓縮後的檔名]

如:uglifyjs tag.js -m -o tag-min.js

第三步,回車,尤拉。

解釋一下命令

-m是可選的,是將變數名變成 a,b,c。(這句話我也不是很明白,某人這樣說的)

但是效果很明顯,246kb的檔案,使用-o壓縮後是136kb 使用-m -o 後是95.8kb.

給力吧。快去試試吧。

ps:對了需要注意,需要壓縮的js中不要出現中文,如果有必要進行中文提示請作為引數傳入,因為壓縮過程中文會壓縮成亂碼。注釋中文沒關係,反正注釋會被乾掉的。我說的是alert中或者設定html的時候。

JQuery學習之jQuery尺寸

1.width 和height 方法 width 設定或返回元素的寬度 不包括內邊距,邊框或外邊距 height 設定或返回元素的高度 不包括內邊距,邊框或外邊距 button click function var txt txt width div1 width txt height div1 h...

jQuery學習之 效果

今天繼續學習一下jquery,主要記錄一下jquery的那些效果顯示 1.animate 函式 animate 方法執行 css 屬性集的自定義動畫。該方法通過css樣式將元素從乙個狀態改變為另乙個狀態。css屬性值是逐漸改變的,這樣就可以建立動畫效果。只有數字值可建立動畫 比如 margin 30...

JQuery學習之其他

1.noconflict 方法 釋放會 識別符號的控制,這樣其他也用 的指令碼就可以使用它了 全名代替簡寫的方法使用jquery noconflict jquery document ready function jquery button click function jquery p text ...