本文目錄一覽：
如何壓縮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，如果沒有都進行壓縮的話，一定會減少很多文件大小的，其實減少文件大少並不是很重要，最重要的是，文件容量減少了，能夠快速的提高網站訪問的速度，給用戶帶來好的體驗，我們盡量的把文件壓縮到最小，這樣才有利於用戶快速的打開網站，至此我的五色旗保健品商城優化後，我的每天的訪問量也增加了很多。
壓縮後的JS代碼怎樣解壓縮？
一般壓縮都經過混淆，如果你看到變量名都是A,B,C,D之類的無規則的命名，那就是被混淆過的，一般來說也很難閱讀，就算你 還原了格式。
如果是沒有混淆的，你可以試試用js的格式化工具來重新格式化一下的，比如：
/* 美化：格式化代碼，使之容易閱讀 */
/* 凈化：去掉代碼中多餘的注釋、換行、空格等 */
/* 壓縮：將代碼壓縮為更小體積，便於傳輸 */
/* 解壓：將壓縮後的代碼轉換為人可以閱讀的格式 */
/* 混淆：將代碼的中變量名簡短化以減小體積，但可讀性差，經混淆後的代碼無法還原 */
/* 如果有用，請別忘了推薦給你的朋友： */
/* javascript在線美化、凈化、壓縮、解壓： */
/* 以下是演示代碼 */
var Inote = {};
Inote.JSTool = function(options) {
this.options = options || {};
};
Inote.JSTool.prototype = {
_name: ‘Javascript工具’,
_history: {
‘v1.0’: [‘2011-01-18’, ‘javascript工具上線’],
‘v1.1’: [‘2012-03-23’, ‘增加混淆功能’],
‘v1.2’: [‘2012-07-21’, ‘升級美化功能引擎’],
‘v1.3’: [‘2014-03-01’, ‘升級解密功能，支持eval,window.eval,window[“eval”]等的解密’],
‘v1.4’: [‘2014-08-05’, ‘升級混淆功能引擎’],
‘v1.5’: [‘2014-08-09’, ‘升級js壓縮引擎’],
‘v1.6’: [‘2015-04-11’, ‘升級js混淆引擎’]
},
options: {},
getName: function() {return this._name;},
getHistory: function() {
return this._history;}
};
var jstool = new Inote.JSTool();
js代碼壓縮！
這個站點裏面有四個壓縮引擎，一個YUI壓縮，一個UglifyJS壓縮，一個JSPacker壓縮，和一個新的JsMin壓縮。
一般用UglifyJS引擎壓縮就可以。jQuery和好些其他的前端項目就是用他壓縮的。
另外給個建議，你把你的JS文件用匿名函數的方式封裝起來，對外只給一個接口。這樣JS壓縮引擎就可以把你匿名函數中不對外開放的內部變量名稱都給替換成a,b,c,d這樣的單字符，很能節省體積。
輕鬆壓縮JS文件
在任意文件夾下按住shift按鍵的同時，點擊鼠標右鍵
打開powershell命令窗口
執行命令： npm install uglify-js -g
首先，打開cmd
其次，查找要壓縮的js文件，查找方法如下：
1、輸入文件所在位置
例如，我需要壓縮的文件在E盤中，就輸入 e:
2、輸入：cd + js文件所在位置
例如，我需要壓縮的js文件在：E:\electron-vue\topology\static\new_node_modules\topology-vue
就執行：cd electron-vue\topology\static\new_node_modules\topology-vue
3、輸入：uglifyjs + 要壓縮的js文件名稱 + -o + 壓縮後js文件名稱
例如，我要將topology-vue.umd.js文件壓縮成topology-vue.umd.min.js
就執行：uglifyjs topology-vue.umd.js -o topology-vue.umd.min.js
你沒看錯！
就是這麼簡單！！
將JS文件進行壓縮，讓你的程序快馬加鞭地跑起來吧！！！
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/311518.html
微信掃一掃 
支付寶掃一掃 