compressjs代碼類,compressorjs

本文目錄一覽：

• 1、js代碼壓縮！
• 2、如何壓縮js
• 3、js 壓縮後的代碼如何調試？
• 4、如何壓縮javascript和css文件

js代碼壓縮！

這個站點裡面有四個壓縮引擎，一個YUI壓縮，一個UglifyJS壓縮，一個JSPacker壓縮，和一個新的JsMin壓縮。

一般用UglifyJS引擎壓縮就可以。jQuery和好些其他的前端項目就是用他壓縮的。

另外給個建議，你把你的JS文件用匿名函數的方式封裝起來，對外只給一個介面。這樣JS壓縮引擎就可以把你匿名函數中不對外開放的內部變數名稱都給替換成a,b,c,d這樣的單字元，很能節省體積。

如何壓縮js

簡單的壓縮一般是：刪除注釋和空白符，替換變數名。

更激進點的做法還包括：刪除無用代碼，內聯函數，等價語句替換等。

有些開發者出於保護代碼的原因，還可能會對代碼進行混淆處理。

通常深度壓縮JS都必須要做的一步就是盡量地縮短變數名，因為一份體積巨大的JS代碼，其中的變數名會佔去不少空間。

壓縮js必須要注意：

1、壓縮前的代碼格式要標準。因為去掉換行與空格時，所有語句就變成一行，如果你的代碼有瑕疵(比如某行少了個分號)，那就會導致整個文件報錯。當然，現在有的壓縮工具已經比較智能了。

2、備份原文件。壓縮很可能不會一次成功，一般要多試，多改。

js壓縮工具：

1. YUI Compressor

2. Google Closure Compiler

js 壓縮後的代碼如何調試？

我想你問的是不是類似UglifyJS之類的混淆過的JS代碼？這種壓縮通常會把變數、函數名之類的改成非常短的名稱，因此這種壓縮過的代碼就難以識別了。

對於這種代碼，推薦的思路是先看瀏覽器中是否有報錯，然後根據錯誤來判斷自己原始代碼里可能出錯的位置；如果沒有報錯，那也是斷定大概的位置，然後Chrome里打開開發者工具里的Sources，打開自己的代碼，用這個地方可以對代碼進行重新排版：

當然，如果是uglify過的代碼還是很難看，只能根據自己實際代碼里的一些常量內容作為關鍵詞在瀏覽器的代碼裡面搜自己可能的位置，然後加斷點推測去調試。

上面的辦法，都是在你對壓縮JS這個過程沒有控制的情況下，如果是你自己壓縮JS代碼，可以在壓縮的時候同時生成sourcemap文件，一般是xxx.js.map文件。如果連同這個文件一起部署，那麼在開發者工具中打開的時候，也可以看到最原始的代碼了。這是最推薦的辦法，調試起來也是最輕鬆的。

如何壓縮javascript和css文件

一、壓縮html和javascript：

我們用站長工具的JavaScript-HTML格式化工具，我們打開頁面，我今天要壓縮的文件js文件：common.js ，把js代碼複製到到JavaScript/HTML格式化工具裡面如下圖所示：

點擊下面的「普通壓縮」和「加密壓縮」按鈕，經過我的精心測試，使用「加密壓縮」，對文件壓縮率是最好的，所以點擊「加密壓縮」，壓縮後如圖：

javascript代碼壓縮後，我們就把這些代碼在複製到common.js文件裡面，在吧這個文件上傳到空間原來的位置，進行訪問是否存在一些錯誤，如果沒有什麼問題說明壓縮成功；

我的common.js 文件壓縮前和壓縮後的對比：

壓縮前：

壓縮後：

文件壓縮前和壓縮後確實有明確的減少，說明壓縮確實減少文件的大小，

我們來測試文件壓縮前和壓縮後所有能的時間做對比(我是用火狐插件測試傳輸速度)：

壓縮前所用時間：

壓縮後所用時間：

壓縮前所用時間是：125ms，壓縮後所用時間：78ms ，文件壓縮後給我們節省大量的時間，如果每個js都進行壓縮，我們房子訪問速度會更快的。

(註：html文件和javascript壓縮原來一樣的，當時壓縮html要用到「普通壓縮」按鈕壓縮)

二、壓縮css文件：

我們打開站長工具的Css壓縮/格式化工具頁面，我要壓縮的文件是五色旗保健品商城的css主文件style.css，首先我們打開站長工具的Css壓縮/格式化工具頁面 ，把style.css 代碼放到Css壓縮/格式化工具裡面，如下圖所示：

點擊「壓縮代碼」按鈕後，css代碼壓縮成功，如下圖所示：

後邊就是壓縮後的css代碼，你要不右邊的代碼複製到源文件style.css裡面在上傳到伺服器空間裡面，在訪問一下網，看看網頁樣式有沒有改變，如果有點變化就需要簡單的調試一下，如果沒有變樣，說明你的css壓縮成功了；

下面我們來看看styl.css文件壓縮前和壓縮後的大小和放在訪問速度的大小：

文件大小對比：

壓縮前：

壓縮後：

壓縮前30kb，壓縮後23kb，明顯的文件大小減小了

壓縮前所用時間：

css壓縮前的時間.jpg (7.36 KB, 下載次數: 0)

下載附件

css壓縮前的時間.jpg

2013-11-2 00:35 上傳

壓縮後所用時間：

壓縮前所用時間是：188ms，壓縮後所用時間：93ms ，css壓縮後明顯的節省了95ms；

總結：一個大的網站可能會有很多的javascript和css，如果沒有都進行壓縮的話，一定會減少很多文件大小的，其實減少文件大少並不是很重要，最重要的是，文件容量減少了，能夠快速的提高網站訪問的速度，給用戶帶來好的體驗，我們盡量的把文件壓縮到最小，這樣才有利於用戶快速的打開網站，至此我的五色旗保健品商城優化後，我的每天的訪問量也增加了很多。