一、jquery.js與jquery.min.js

學(xué)習(xí)web前端開發(fā)的童鞋們都應(yīng)該知道jquery是有兩個(gè)版本的。

分別是開發(fā)版(例如：jquery-1.11.3.js)和壓縮版(例如jquery-1.11.3.min.js)

那么這兩個(gè)有什么區(qū)別??

樓主在這里簡單的介紹一下，具體可以去查度娘

名稱                          大小                  說明

jqeury.js(開發(fā)版)      約229KB完整無壓縮版，主要用于測試，學(xué)習(xí)，和開發(fā)

jqeury.min.js(壓縮版)       約31KB            經(jīng)過壓縮工具壓縮，主要用于產(chǎn)品和項(xiàng)目使用

我們平時(shí)在學(xué)習(xí)的時(shí)候都是使用jquery.js文件，但是真正在企業(yè)中，為了壓縮文件大小，提高運(yùn)行效率，有必要使用jquery.min.js等類似的壓縮文件來增強(qiáng)代碼運(yùn)行速度和減少內(nèi)存的?。?/p>

想要更加了解為什么需要使用壓縮版文件的請參考網(wǎng)址：http://blog.csdn.net/yangqicong/article/details/7057982

二、壓縮工具YUI-compressor

壓縮工具層次不窮，各有優(yōu)點(diǎn)，選擇適合的壓縮工具為將來做項(xiàng)目開發(fā)使用是一件很重要的事情??！在這介紹YUI-compressor

英文官網(wǎng)：http://yui.github.io/yuicompressor/

GitHub-YUI:https://github.com/yui/yuicompressor

使用YUI壓縮，首頁需要準(zhǔn)備YUI的jar包

java jdk1.8(jdk-8u261) 64位 官方版附安裝教程

• 類型：java相關(guān)
• 大?。?/span>164MB
• 語言：簡體中文
• 時(shí)間：2024-07-04

查看詳情

下載好后，將jar包放在比較方便獲取的位置，樓主放在了E盤的根目錄下?。?/p>

下載好jar包文件后，還需要壓縮的文件(通常是js文件)，為了方便示范，樓主寫了一個(gè)測試的html文件(yuitest.html)和js文件(yuitest.js)

好了，以上都是準(zhǔn)備工作，那么如何使用YUI進(jìn)行文件壓縮？？

如何使用YUI進(jìn)行文件壓縮

1.方式一：

通過CMD命令行方式。

為了方便，我將剛才創(chuàng)建的yuitest.js文件復(fù)制一份也放到E盤根目錄下面，方便進(jìn)行壓縮

打開cmd，輸入java -jar 命令，先別點(diǎn)回車

然后，將剛才下載好的jar包導(dǎo)入，還是別點(diǎn)回車

然后，將需要壓縮的js文件導(dǎo)入，并且用一個(gè)>符號輸出壓縮文件的名字和地址,這個(gè)時(shí)候點(diǎn)擊回車?。?！

如圖，在E盤根目錄下多了一個(gè)yuitest.min.js文件?。?！這個(gè)就是yuitest.js經(jīng)過壓縮后的文件，讓我們來看看兩個(gè)文件的大小對比！

可以看到壓縮文件yuitest.min.js文件比yuitest.js文件小了100Kb左右！！

2.方式二:

利用開發(fā)工具webstorm

沒有這個(gè)工具的同學(xué)就自行下載哈！?。。?/p>

打開webstorm，將我們前面創(chuàng)建好的yuitest.html和yuitest.js導(dǎo)入，運(yùn)行后結(jié)果如下：

然后，我們打開WS工具的設(shè)置界面

然后找到Tools -- >  File Watchers,點(diǎn)擊右邊的+，選擇最后一項(xiàng)"YUI compressor JS "

在彈出框中的Program項(xiàng)中點(diǎn)擊后面的"..." 選擇放在E盤下的jar包文件，然后點(diǎn)擊OK即可

出現(xiàn)如下界面說明導(dǎo)入成功??！然后點(diǎn)擊OK退出設(shè)置界面即可

我們以上做的這些操作的目的是為了在WS中設(shè)置一個(gè)監(jiān)聽器，我們對js文件進(jìn)行的操作都會轉(zhuǎn)變成min.js文件，無論是輸入一個(gè)空格還是一個(gè)回車，都會啟動jar包對js文件進(jìn)行轉(zhuǎn)換，例如我們在yuitest.js文件中輸入一個(gè)回車或者空格后，在yuitest.js下面就多了一個(gè)yuitest.min.js文件

我們觀察yuitest.min.js文件，神奇的發(fā)現(xiàn)，所有代碼都變成了一行??！

var btn=document.getElementById("b1");btn.οnclick=function(){console.log(1);console.log(2);console.log(3);console.log(4);console.log(5);console.log(6);console.log(7);console.log(8);console.log(9);console.log(10);console.log(11);console.log(12);console.log(13);console.log(14);console.log(15);console.log(16);console.log(17)};

所有空格回車都被壓縮了擠成一行，極大的縮減了內(nèi)存??！

測試一下yuitest.min.js是否可用，在html文件引入yuitest.min.js

運(yùn)行yuitest.html后，結(jié)果和壓縮之前運(yùn)行的結(jié)果一模一樣，但是內(nèi)存使用比原來的減小了！！

3.方式三：通過TBCompressor

TBCompressor 基于YUICompressor v2.4.8的淘寶封裝的css和js壓縮工具

• 類型：開發(fā)輔助
• 大?。?/span>801KB
• 語言：簡體中文
• 時(shí)間：2024-06-30

查看詳情

壓縮css和js是我們工作中經(jīng)常要處理的一件事,這里介紹的是一款基于YUICompressor,淘寶封裝的css和js壓縮工具TBCompressor.
TBCompressor的安裝很簡單,點(diǎn)擊install.cmd就可以了,安裝后會在里的右鍵菜單里出現(xiàn)"Compress CSS or JS"選項(xiàng),需要壓縮文件時(shí)只需選取目標(biāo)文件然后右鍵點(diǎn)選"Compress CSS or JS"即刻.壓縮后的文件會自動重命名.

TBCompressor安裝教程： http://www.dbjr.com.cn/softjc/142644.html

這款js壓縮工具，是最好用的，jquery等也用這個(gè)壓縮，壓縮率高，不會出現(xiàn)在線壓縮工具那樣的，各種各樣的錯(cuò)誤。
好處就是：減少js的體積，減少調(diào)用時(shí)間，提高網(wǎng)頁執(zhí)行效率，如果js過大就會導(dǎo)致加載慢，而導(dǎo)致頁面的一些效果不能正常快速的執(zhí)行。

總結(jié)：

web前端優(yōu)化是一個(gè)非常重要的任務(wù)，在開發(fā)中使用壓縮工具也是必要途徑之一??！

最新評論