js代碼壓縮
A. 怎樣將js 壓縮成 jsgz 文件
html中內嵌js代碼修改為外部調用的方法: 1,新建一個js文件,將html中之前的代碼全部選中剪切到該js文件中。如下這個案例,就只剪切其中的alert("測試")。 alert("測試");2,在html中添加js文件調用代碼
B. 如何利用node進行js css合並壓縮
gulp是基於Node.js的前端構建工具。所以首先需要安裝nodejs,安裝nodejs。
完成nodejs安裝之後,需要使用npm安裝gulp。
先安裝全局gulp
npm install -g gulp然後在項目根目錄下安裝本地gulp。
此時項目根目錄下會多出下面這個文件夾 node_moles
好的,現在gulp已經安裝完成了,但是gulp本身不提供js壓縮合並等功能,需要使用gulp的相關插件。目前只需要完成js壓縮合並和css文件壓縮的功能,先安裝相應的插件:
1.css壓縮 gulp-minify-css
2.js壓縮 gulp-uglify
3.js合並 gulp-concat
由於壓縮之前需要對js代碼進行代碼檢測,壓縮完成之後需要加上min的後綴,我們還需要安裝另外兩個插件:
C. 壓縮後的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();
D. js代碼壓縮的優點
有利於頁面的性能提高,加快頁面的打開速度,尤其是第一次訪問時。
E. 如何壓縮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,如果沒有都進行壓縮的話,一定會減少很多文件大小的,其實減少文件大少並不是很重要,最重要的是,文件容量減少了,能夠快速的提高網站訪問的速度,給用戶帶來好的體驗,我們盡量的把文件壓縮到最小,這樣才有利於用戶快速的打開網站,至此我的五色旗保健品商城優化後,我的每天的訪問量也增加了很多。
F. js文件 壓縮成一個 是怎麼弄的
gulp + webpack/browserify
用gulp加上webpack或者browserify來完成。js之間使用require相互引用,然後在gulpfile裡面設置把所有文件整合輸出並uglify
G. 如何編寫 JavaScript 使得壓縮後的代碼完全不可讀
大部分壓縮工具為了保證對任意代碼的兼容,通常只縮短 function scope 裡面 local 的變數名,對於全局變數和對象屬性名都是保留的。比如:
function doSomething (longArgumentName) {
var longVarName = 123
return longArgumentName + longVarName
}
var globalObject = {
longMethodName: doSomething
}
其中 doSomething 內部的 longArgumentName 和 longVarName 都可以縮短為單個字母;但是 doSomething, globalObject 以及其他地方對 globalObject.longMethodName 的調用都無法壓縮。這樣壓縮的結果就是 beautify 一下以後多少還是會保留一些原代碼的可讀性。
Google 的 Closure Compiler 在 Advanced Optimization 模式下,可以通過對代碼風格進行一定的限制,以及加上 JSDoc 注釋來提示壓縮工具哪些全局變數、方法名是可以壓縮的,從而實現題主例子里的壓縮效果,但這樣的壓縮並不能作用在任意代碼上。
H. JSP文件里大量JS代碼,想發布時壓縮JS怎麼辦
我是這樣的,用一個插件保存的時候,自動生成一個壓縮文件(.min.js),這樣頁面直接引用.min.js,而需要調試的時候改成.js就好了。
也有很多打包工具可以幫你做這些事,主要是看你的開發環境
I. js 壓縮後的代碼如何調試
我想你問的是不是類似UglifyJS之類的混淆過的JS代碼?這種壓縮通常會把變數、函數名之類的改成非常短的名稱,因此這種壓縮過的代碼就難以識別了。
對於這種代碼,推薦的思路是先看瀏覽器中是否有報錯,然後根據錯誤來判斷自己原始代碼里可能出錯的位置;如果沒有報錯,那也是斷定大概的位置,然後Chrome里打開開發者工具里的Sources,打開自己的代碼,用這個地方可以對代碼進行重新排版:
當然,如果是uglify過的代碼還是很難看,只能根據自己實際代碼里的一些常量內容作為關鍵詞在瀏覽器的代碼裡面搜自己可能的位置,然後加斷點推測去調試。
上面的辦法,都是在你對壓縮JS這個過程沒有控制的情況下,如果是你自己壓縮JS代碼,可以在壓縮的時候同時生成sourcemap文件,一般是xxx.js.map文件。如果連同這個文件一起部署,那麼在開發者工具中打開的時候,也可以看到最原始的代碼了。這是最推薦的辦法,調試起來也是最輕松的。
J. 前端性能優化為什麼壓縮js代碼
減小JS文件體積,加快其傳輸速度。還有可能是進行混淆壓縮 仿製代碼被