js腳本壓縮
A. 如何壓縮js文件
js文件,據我所知應該是javaScript的腳本文件,這種文件本身就是全文本,跟TXT文件差不多,應該不需要壓縮了呀。。
B. js 壓縮後的代碼如何調試
我想你問的是不是類似UglifyJS之類的混淆過的JS代碼?這種壓縮通常會把變數、函數名之類的改成非常短的名稱,因此這種壓縮過的代碼就難以識別了。
對於這種代碼,推薦的思路是先看瀏覽器中是否有報錯,然後根據錯誤來判斷自己原始代碼里可能出錯的位置;如果沒有報錯,那也是斷定大概的位置,然後Chrome里打開開發者工具里的Sources,打開自己的代碼,用這個地方可以對代碼進行重新排版:
當然,如果是uglify過的代碼還是很難看,只能根據自己實際代碼里的一些常量內容作為關鍵詞在瀏覽器的代碼裡面搜自己可能的位置,然後加斷點推測去調試。
上面的辦法,都是在你對壓縮JS這個過程沒有控制的情況下,如果是你自己壓縮JS代碼,可以在壓縮的時候同時生成sourcemap文件,一般是xxx.js.map文件。如果連同這個文件一起部署,那麼在開發者工具中打開的時候,也可以看到最原始的代碼了。這是最推薦的辦法,調試起來也是最輕松的。
C. 怎樣將js 壓縮成 jsgz 文件
html中內嵌js代碼修改為外部調用的方法: 1,新建一個js文件,將html中之前的代碼全部選中剪切到該js文件中。如下這個案例,就只剪切其中的alert("測試")。 alert("測試");2,在html中添加js文件調用代碼
D. nodejs版本的腳本壓縮和compo工具怎麼使用
一、下載並安裝NodeJS for Windows 0.6.5 或進入NodeJS官網下載最新版本。
二、查看版本:
運行cmd
node -v
npm -v
如果上訴兩個命令出錯,請打開系統環境變數Path,直接點確定。再試。
三、安裝UglifyJS 這里我們安裝最新的版本,具體版本可在npm官網查看,uglify-js版本頁面。
npm install uglify-js -g
然後等待命令完成,這個過程時間可能有點長。
如果出錯請刪除
C:\Users\Administrator\AppData\Roaming\npm 內相關內容
C:\Users\Administrator\AppData\Roaming\npm-cache 內相關內容
C:\Users\Administrator 下的錯誤信息文件
然後再次運行
四、修改配置
上述安裝後自動生成的配置文件是不可直接使用的,我們需要手工去修改。
打開C:\Users\Administrator\AppData\Roaming\npm\uglifyjs.cmd
內容為:
:: Created by npm, please don't edit manually.
"%~dp0\.\node_moles\uglify-js\bin\uglifyjs" %*
修改為:
:: Created by npm, please don't edit manually.
@IF EXIST "%~dp0"\"node.exe" (
"%~dp0"\"node.exe" "%~dp0\.\node_moles\uglify-js\bin\uglifyjs" %*
) ELSE (
node "%~dp0\.\node_moles\uglify-js\bin\uglifyjs" %*
)
五、使用uglifyjs對javascript進行壓縮美化
壓縮:
uglifyjs f.js > f.min.js
美化:
uglifyjs -b f.min.js > f.b.js
E. JSP文件里大量JS代碼,想發布時壓縮JS怎麼辦
我是這樣的,用一個插件保存的時候,自動生成一個壓縮文件(.min.js),這樣頁面直接引用.min.js,而需要調試的時候改成.js就好了。
也有很多打包工具可以幫你做這些事,主要是看你的開發環境
F. js代碼壓縮的優點
有利於頁面的性能提高,加快頁面的打開速度,尤其是第一次訪問時。
G. 如何壓縮js
簡單的壓縮一般是:刪除注釋和空白符,替換變數名。
更激進點的做法還包括:刪除無用代碼,內聯函數,等價語句替換等。
有些開發者出於保護代碼的原因,還可能會對代碼進行混淆處理。
通常深度壓縮JS都必須要做的一步就是盡量地縮短變數名,因為一份體積巨大的JS代碼,其中的變數名會佔去不少空間。
壓縮js必須要注意:
1、壓縮前的代碼格式要標准。因為去掉換行與空格時,所有語句就變成一行,如果你的代碼有瑕疵(比如某行少了個分號),那就會導致整個文件報錯。當然,現在有的壓縮工具已經比較智能了。
2、備份原文件。壓縮很可能不會一次成功,一般要多試,多改。
js壓縮工具:
1. YUI Compressor
2. Google Closure Compiler
H. 如何壓縮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,如果沒有都進行壓縮的話,一定會減少很多文件大小的,其實減少文件大少並不是很重要,最重要的是,文件容量減少了,能夠快速的提高網站訪問的速度,給用戶帶來好的體驗,我們盡量的把文件壓縮到最小,這樣才有利於用戶快速的打開網站,至此我的五色旗保健品商城優化後,我的每天的訪問量也增加了很多。
I. js代碼壓縮!
http://tools.css-js.com/compressor.html
這個站點裡面有四個壓縮引擎,一個YUI壓縮,一個UglifyJS壓縮,一個JSPacker壓縮,和一個新的JsMin壓縮。
一般用UglifyJS引擎壓縮就可以。jQuery和好些其他的前端項目就是用他壓縮的。
另外給個建議,你把你的JS文件用匿名函數的方式封裝起來,對外只給一個介面。這樣JS壓縮引擎就可以把你匿名函數中不對外開放的內部變數名稱都給替換成a,b,c,d這樣的單字元,很能節省體積。
J. 壓縮後的JS代碼怎樣解壓縮
一般壓縮都經過混淆,如果你看到變數名都是A,B,C,D之類的無規則的命名,那就是被混淆過的,一般來說也很難閱讀,就算你 還原了格式。
如果是沒有混淆的,你可以試試用js的格式化工具來重新格式化一下的,比如:
/* 美化:格式化代碼,使之容易閱讀 */
/* 凈化:去掉代碼中多餘的注釋、換行、空格等 */
/* 壓縮:將代碼壓縮為更小體積,便於傳輸 */
/* 解壓:將壓縮後的代碼轉換為人可以閱讀的格式 */
/* 混淆:將代碼的中變數名簡短化以減小體積,但可讀性差,經混淆後的代碼無法還原 */
/* 如果有用,請別忘了推薦給你的朋友: */
/* javascript在線美化、凈化、壓縮、解壓:http://tool.lu/js */
/* 以下是演示代碼 */
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();