js在線壓縮
❶ 輕松壓縮JS文件
在任意文件夾下按住shift按鍵的同時，點擊滑鼠右鍵
打開powershell命令窗口
執行命尺漏令： npm install uglify-js -g
首先，打開cmd
其次，查找要壓縮的js文件，查找方法如下：
1、輸入文件所在位置
例如，陵輪爛我需要壓縮的文件在E盤中，就輸入 e:
2、輸入：cd + js文件所在位置
例如，我需要壓縮的js文件在：E:\electron-vue\topology\static\new_node_moles\topology-vue
就執行：cd electron-vue\topology\static\new_node_moles\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文桐宏件進行壓縮，讓你的程序快馬加鞭地跑起來吧！！！
ueditor 用啥工具不清楚，不過壓縮js 文件有以下幾種（我知道的）
在線壓縮，可以訪問某個網站，有提供的在線壓縮js的功能，例如：chrunleexun.com
通過工具壓縮，例如：uglify ，可以安裝nodejs 後，安裝uglify 模塊，通過命令行對文件進行壓縮。
❸ TS/JS 使用pako.js 壓縮字元串和二進制
因為項目需要壓縮字元串和二進制，找到了旦脊pako這個庫：
https://github.com/nodeca/pako
https://gitee.com/renew_old_romance/pako/tree/master
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/pako/index.d.ts
參考 Javascript 簡單實現Gzip 壓縮字元串 基於pako.js
因為字元串需要與後端通訊，所以使用了bota/atob進行base64編碼。
關於字元串與二進制處理，可以參考 jsmpeg系列一 基礎知識 字元處理 ArrayBuffer TypedArray ，其中提到了ArrayBuffer與字元串的互相轉換。
ArrayBuffer轉為字元串，或者字元串轉為ArrayBuffer，有一個前提，即字元串的編碼方法是確定的。假定字元串採用UTF-16編碼（JavaScript的內部編碼段彎方式），可以自己編寫轉換函數。
但是，ab2str這種寫法，在實際使用中，如果buf過大，會有 Maximum call stack size exceeded 堆棧溢出。
可以參考 javascript - js數組轉字元串 - 在字元串握遲悶和ArrayBuffers之間轉換 ，改為for的寫法：
❹ 網站空間流量超標怎麼解決
瀏覽網頁產生的流量是由網凳沖頁html代碼、flash、圖片、css、js等文件體積組成，因此，控制空間網頁流量就得從這幾個部分出發，減少它們的體積容量。
1、優化html代碼
優化html代碼，基本做法是去掉很多不必要的字元，例如去掉注釋部分、去掉空行等。
還有更重要的是html代碼的書寫問題。用最少的代碼實現需求，是一個html程序員必須永遠追求的境界。舉個很簡單的例子，假如你對網頁表格寬度的定義，是在每個表格里都用「width="***px"」，那麼你的寫法雖然能實現要求，但是總體看來是比較低效的。你完全可以用css全局定義一下table{width:***px}。這樣處理，你的代碼就會減少很多，簡潔很多，進一步說，你的網頁體積就會減少，網頁打開時間就會減少，網頁流量就會減少。
優化html代碼，當然少不了gzip壓縮，通過gzip壓縮，代碼的傳輸量會減少60%以上！這是控制流量最值得推薦也是最應用廣泛的方法。你的網站啟用了gzip嗎？立即在線檢測gzip壓縮看看。如何啟用網站的gzip壓縮功能？
所以，優化html代碼，無論是對於網頁流量的控制還是網頁打開時間的控制，都是非常重要的。不過你如果用的是現成的程序模版，基本是不用怎麼優化html了，開發者多在這方面下了很大功夫，做得已經很優型旅秀的了。
2、優化flash
flash體積一般比較大，這里談的優化flash，並不是說如何去做體積更小的flash，而是站長對flash的取捨問題。一張網頁，如果放太多的flash文件，網頁體積就會變得非常之大，網頁打開速度會變得比較慢，網頁流量卻會增加得很快。
所以，網頁應盡量少用，最好不用flash文件。
3、優化圖片
圖片是網頁的重要組成部分，一張網頁如果沒有圖片就會變得太過沉靜，很影響網頁美觀，也影響用戶感受。但是一張網頁如果圖片數量過多或體積過大，就會嚴重影響下載速度和打開時間，再就是，它會讓你的網頁流量增長迅速，這對於受月流量限制的空間來說，簡直就是個噩夢。
所以，網頁除了使用很必要的圖片外，其他不相乾的圖片應盡量不用。一部分人使用圖床來控制空間流量，這樣做是個辦法，但不可否認會導致網頁的打開時間增多和速度減慢的問題卜粗凳。
因此，我認為圖片最好是在正式放到空間使用前，做個壓縮優化。webkaka的圖片在線壓縮優化工具，給大家提供了一個便利，經測試，部分圖片的無損壓縮比達到90%以上！換句話來說，50k的圖片經過無損壓縮後，只有5k！
4、優化css
優化css，主要是從代碼出發，刪除多餘的字元，從而達到壓縮優化的目的。webkaka的css在線壓縮優化工具，能使部分css代碼壓縮比達到30%以上。使用壓縮優化過css文件，可以減少網頁的總體積，從而減少瀏覽網頁時產生的流量。這是控制網頁流量的一個手段。
5、優化js
與優化css一樣，主要是從代碼出發，刪除多餘的字元，從而達到壓縮優化的目的。webkaka的js在線壓縮優化工具，能使js代碼壓縮比達到20%以上。
總結
網站空間月流量超標，是站長不願看到的事，但是換另一個角度來看，網站流量超標，不就說明了網站流量提升了么？這應該事個值得慶賀的事！而對於本文提到的控制網頁流量的方法，其實只能是治標不治本，最好的做法是用個沒有月流量限制的空間，那樣，你可以騰出更多的時間去做網站內容，而不用再去擔心網站流量的問題。
❺ js壓縮圖片 到固定像素以內，500k為例
本文旨在探究js壓縮圖片的兩種方式： 改變圖片長寬 ， 改變圖片質量 ，和結合了以上兩者的 最終方案 。
首先，閱讀本文需要知道canvas的兩個方法
這兩個方法具體的說明可以在MDN上查看，關於圖片壓縮，也有很多現成的博客可以直接用。但是那些博客都有個問題，並沒有關心之後圖片的壓縮質量。
我試著用一個現成的例子去跑了一下，一個1.7M的圖片壓縮到了23k，堪稱像素級毀滅性破壞。
假如一張大圖可能包含著很多文字等關鍵信息，必須上傳之後使用方能清晰辨認。所以要壓縮之後質量盡可能接近500k的。500k像素以內，就是若一張圖寬度為1024，則高度不能超過500。因為圖片有其他的信息，也是要佔大小的。即不得大於 1024*500 。
所以，根據需求，上傳圖片不能超過500k的情況下盡可能保留圖片的清晰度。當然如果可以的情況下用上面提到的 canvas.toDataURL 設置壓縮程度為0.9，0.8試試看，圖片質量可以接受，大小會有大幅度的縮小。
如果不壓縮，靠調整圖片長寬去控制上傳大小呢？
原理很簡單，就是靠不斷地縮小限定的最大寬高，直到最終長寬的積小於規定的大小。
這種方法有可能最後得出的圖片的大小會略大於規定大小，原因上文也提到過了，如果想使用這種方法，可自行再調整一下。
上面的方法有個問題，就是改變了圖片的原始長寬。如果一個圖的長寬足夠大，壓縮圖片質量，糊一點但是內容看得清也是ok的嘛。所以，跟上面同理，我們可以不斷調整圖片的質量設定直到大小合適，那麼，如何在圖片上傳之前知道圖片的大小呢？
首先，需要知道的一點是，壓縮之後拿到的base64字元串會轉成blob對象，然後傳給服務端。
可以查閱文檔，blob對象有個屬性是size
這個size就是上傳之後實際的文件大小。
參照上面的思路，可以每次改變 canvas.toDataURL('image/' + fileType, level); level的值，去調整壓縮圖片質量，然後用blob對象的size去驗證是否滿足500k以內的需求。
關於 canvas.toDataURL 的level到底是怎麼計算的，MDN文檔里也沒說，寫了個循環一次減少0.1的level壓縮了幾個圖片
用加減乘除算了一下，沒找到規律，數學不好放棄了（這個東西好像也不是能觀察出來的，看結果跟初始大小沒啥關系）。
這里要注意的是，有可能遇到超大圖片，0.1的level可能不足以壓縮到500k，所以小於0.1的時候，改變level遞減的差值繼續壓縮下去
在開始接收到圖片的時候給一個loading增加用戶的耐心好了，loading萬歲~
其實單純的壓縮質量遇到稍大的圖片，會導致頁面高頻計算，然後頁面基本就用不了了- -。有嘗試過用iphone的一個屏幕截圖（10M左右），壓的時候稍過一會，整個手機都在發燙，只能殺進程。
所以，若對長度沒有特殊的限制，可以做一個縮放，去加快壓縮的進度，提高能壓縮的圖片大小上限。
頁面到了ios上還是不行- -，可以看到最後圖片level為0.001，最長邊為764。
問題還是循環次數還是過多，計算頻率太高。從圖中可看出，對於大圖來說，初始設定的level和圖片尺寸過於寬松，可以優化一下初始level和尺寸。
有的時候還會遇到一張圖片無論如何也壓不到500k，就是上一次和這次的壓縮後大小沒有變化，這種情況需要拋錯，不讓循環繼續。
大圖片的等待時間稍長，可以給用戶先預覽一個base64的圖片增加等待耐心，方法名為 getImgBase64 ,這里都一並給出了
解決的隱患：上面這個方案會出現我需要一個500k的照片，壓到了520k之後，再壓了一次。有時候這最後的一次會特別誇張，直接將圖片弄到了幾十k。
參考了： https://github.com/WangYuLue/image-conversion
這個庫裡面有個方法 compressAccurately ,這個方法可以比較精準地壓縮。偷偷翻了一下源碼。
其實上一個方案的痛點就在於，如何在每一個壓縮循環里處理尺寸和壓縮比例。
總結
如有紕漏，歡迎指正
❻ uglify-js壓縮js文件minifier壓縮css文件
安裝：cnpm install uglify-js –gcss
參數用法：
uglifyjs XX.js -o xx.min.js 壓縮
uglifyjs XX.js -m -o xx.min.js 混淆性壓縮態敬戚
uglifyjs xx.min.js –b –o xx.js 美化（反壓縮） 文稿喚件
安裝：
cnpm install minifier -g
用法:
minifier 是一個 nodejs 下的用於壓縮 js 和 css 文件的插件。
minify index.js
則在當前文件夾下會生成一個index.min.js 的壓縮的文件。css文件採用相同的命令進行壓縮帆陵。
❼ 如何壓縮網站里的css 和js文件 來減少空間的使用率，是網站打開速度加快，求給位高手幫忙！！！
CSS根本不需要壓縮，本身也沒有多大，JS你可以放在最後才調用，就可以加快一點速度。
❽ 怎麼用JavaScript在線壓縮圖片
主要用了兩個html5的 API，一個file，一個canvas，壓縮主要使用cnavas做的，file是讀取文件，之後把壓縮好的照片放入內存，最後內存轉入表單下img.src，隨著表單提交。
照片是自己用單反拍的，5M多，壓縮下面3張分別是600多kb，400多kb，300kb的最後那張失真度很大了，壓縮效率蠻高的。
<!DOCTYPE html>
<html><head> <meta charset="utf-8"/> <title>File API Test</title> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="js/JIC.js"></script> <style> #test{ display: none; } </style></head><body><input type="file" id="fileImg" ><form> <img src="" id="test" alt=""></form><script> function handleFileSelect (evt) { // var filebtn = document.getElementById(id); // console.log(filebtn); // var files = filebtn.target.files; // console.log(filebtn.target); // console.log(files); var files = evt.target.files; for (var i = 0, f; f = files[i]; i++) { // Only process image files. if (!f.type.match('image.*')) { continue; } var reader = new FileReader(); // Closure to capture the file information. reader.onload = (function(theFile) { return function(e) { // Render thumbnail. // console.log(evt.target.files[0]); // console.log(e.target); console.log(e.target.result); var i = document.getElementById("test"); i.src = event.target.result; console.log($(i).width()); console.log($(i).height()); $(i).css('width',$(i).width()/10+'px'); //$(i).css('height',$(i).height()/10+'px'); console.log($(i).width()); console.log($(i).height()); var quality = 50; i.src = jic.compress(i,quality).src; console.log(i.src); i.style.display = "block"; }; })(f); // Read in the image file as a data URL. reader.readAsDataURL(f); } } document.getElementById('fileImg').addEventListener('change', handleFileSelect, false);</script></body></html>
var jic = { /** * Receives an Image Object (can be JPG OR PNG) and returns a new Image Object compressed * @param {Image} source_img_obj The source Image Object * @param {Integer} quality The output quality of Image Object * @return {Image} result_image_obj The compressed Image Object */ compress: function(source_img_obj, quality, output_format){ var mime_type = "image/jpeg"; if(output_format!=undefined && output_format=="png"){ mime_type = "image/png"; } var cvs = document.createElement('canvas'); //naturalWidth真實圖片的寬度 cvs.width = source_img_obj.naturalWidth; cvs.height = source_img_obj.naturalHeight; var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0); var newImageData = cvs.toDataURL(mime_type, quality/100); var result_image_obj = new Image(); result_image_obj.src = newImageData; return result_image_obj; }, function ****(***)
❾ js 壓縮後的代碼如何調試
最好的方法是使用穗皮臘在線工具HCJCompress，不僅壓縮HTML、CSS、JS，具有還原功能。
1、進入HCJCompress。
2、根據文件數量，增刪輸入窗口的數量。
這種方法完美將代碼還原到源代碼中，根據握渣上下文和注釋，調試工作，應該順利一些吧。
❿ 壓縮後的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();