js壓縮腳本

㈠ 如何實現JS中圖片壓縮方法

本文主要介紹JS中圖片壓縮的方法，包括等比壓縮圖片的方法,需要的朋友可以參考下，希望能幫助到大家。
大多時候我們需要將一個File對象壓縮之後再變為File對象傳入到遠程圖片伺服器；有時候我們也需要將一個base64字元串壓縮之後再變為base64字元串傳入到遠程資料庫；有時候後它還有可能是一塊canvas畫布，或者是一個Image對象，或者直接就是一個圖片的url地址，我們需要將它們壓縮上傳到遠程；面對這么多的需求，索性畫了一張圖：
Alt text
二、解決辦法
如上圖所示，王二一共寫了七個方法，基本覆蓋了JS中大部分文件類型的轉換與壓縮，其中：
1、 urltoImage(url,fn) 會通過一個url載入所需要的圖片對象，其中 url 參數傳入圖片的 url , fn 為回調方法,包含一個Image對象的參數，代碼如下：


2、 imagetoCanvas(image) 會將一個 Image 對象轉變為一個 Canvas 類型對象，其中 image 參數傳入一個Image對象，代碼如下：


3、 canvasResizetoFile(canvas,quality,fn) 會將一個 Canvas 對象壓縮轉變為一個 Blob 類型對象；其中 canvas 參數傳入一個 Canvas 對象; quality 參數傳入一個0-1的 number 類型，表示圖片壓縮質量; fn 為回調方法，包含一個 Blob 對象的參數;代碼如下：


這里的 Blob 對象表示不可變的類似文件對象的原始數據。 Blob 表示不一定是 JavaScript 原生形式的數據。 File 介面基於 Blob ，繼承了 Blob 的功能並將其擴展使其支持用戶系統上的文件。我們可以把它當做File類型對待，其他更具體的用法可以參考MDN文檔
4、 canvasResizetoDataURL(canvas,quality) 會將一個 Canvas 對象壓縮轉變為一個 dataURL 字元串,其中 canvas 參數傳入一個 Canvas 對象; quality 參數傳入一個0-1的 number 類型，表示圖片壓縮質量;代碼如下：


其中的 toDataURL API可以參考MDN文檔
5、 filetoDataURL(file,fn) 會將 File （ Blob ）類型文件轉變為 dataURL 字元串,其中 file 參數傳入一個 File （ Blob ）類型文件; fn 為回調方法，包含一個 dataURL 字元串的參數;代碼如下：


6、 dataURLtoImage(dataurl,fn) 會將一串 dataURL 字元串轉變為 Image 類型文件,其中 dataurl 參數傳入一個 dataURL 字元串, fn 為回調方法，包含一個 Image 類型文件的參數，代碼如下：


7、 dataURLtoFile(dataurl) 會將一串 dataURL 字元串轉變為 Blob 類型對象，其中 dataurl 參數傳入一個 dataURL 字元串,代碼如下：


三、進一步封裝
對於常用的將一個 File 對象壓縮之後再變為 File 對象,我們可以將上面的方法再封裝一下，參考如下代碼：


其中， file 參數傳入一個 File （ Blob ）類型文件； quality 參數傳入一個 0-1 的 number 類型，表示圖片壓縮質量； fn 為回調方法，包含一個 Blob 類型文件的參數。
它使用起來就像下面這樣：


這樣的話，圖片壓縮上傳就能輕松地搞定了，以上的8個方法我已經封裝好放到 github 上了，喜歡的話可以使勁的star哈。
參考文檔：
MDN
ps：下面看下JS等比壓縮圖片的辦法

㈡ 如何對 js 源代碼進行壓縮

在JavaScript的世界裡，代碼體積的精簡猶如為網頁加速插上了翅膀。代碼壓縮，一項不可或缺的優化技術，通過精簡字元、移除冗餘，讓文件瘦身，提升載入速度和執行效率，實現網頁性能的飛躍。下面，讓我們深入探討如何對JavaScript源代碼進行這場華麗的瘦身之旅。
1. 精簡代碼，從細節開始
首先，刪除無用的空白字元和注釋，如同剔除代碼中的雜物，讓代碼變得簡潔。空格、換行、製表符和注釋雖然不影響代碼運行，但它們無疑在無形中增加了文件的體積。
2. 簡化命名，縮短路徑
接著，對變數和函數進行瘦身。冗長的名稱可以被縮短，甚至用單字元代替，這在減小代碼量上立竿見影。每個字元的節省都意味著載入時間的縮減。
3. 檢查並刪除冗餘
使用靜態代碼分析工具，找出並移除未使用的代碼片段，就像清理無用的冗餘，讓代碼更加精煉。
4. 代碼混淆，隱藏秘密
進一步，代碼混淆技術讓變數和函數名變得難以理解，既減小了體積，又增加了破解的難度。這一步，是保護代碼安全與效率的雙重保障。
5. 簡化表達，巧用縮寫
對於常見的字元串和表達式，使用縮寫和簡寫，就像給代碼語言瘦身，提升其執行效率。
6. 內聯與拆分，優化載入
內聯函數和腳本，減少HTTP請求，而代碼拆分則允許按需載入，兼顧性能與用戶體驗的雙重考量。
7. 工具助力，一鍵壓縮
最後，藉助專業的壓縮工具如UglifyJS和JShaman Minify，它們自動執行上述步驟，將你的代碼壓縮到極致，釋放出極致的性能潛力。
例如，看看壓縮前後的差異：未壓縮的代碼清晰易讀，但體積較大。
未壓縮代碼：
// 這是一個示例函數 function exampleFunction(input) { var output = input * 2; return output; } // 調用示例函數 var result = exampleFunction(5); console.log(result);
而經過JShaman Minify壓縮後，代碼變得難以直接閱讀，但體積大幅度減小：
function _e(input){var _o=input*2;return _o;}var _r=_e(5);console.log(_r);
總的來說，代碼壓縮是在開發和生產環境中不可或缺的一步。在保證代碼可讀性的同時，它為提升用戶體驗提供了有力支持。所以，下一次面對源代碼時，別忘了為它穿上輕盈的壓縮衣裳。

㈢ JS壓縮誰最強對比5款JS代碼壓縮工具

在眾多JS代碼壓縮工具中，誰的實力最為強大？本文對比了JShaman、minify-js、toptal、JSCompress以及一款未命名的工具，來揭示它們的壓縮效果。

首先，測試用的JS代碼原本大小為674位元組。JShaman的表現最為亮眼，壓縮後體積僅為207位元組，壓縮率高達驚人67%。相比之下，minify-js和JSCompress的壓縮後體積都在390位元組左右，效果稍遜於JShaman。而那位未知品牌的工具，壓縮後仍有498位元組，效果最不理想。

JShaman作為專業級工具的代表，不僅有無效代碼清理和邏輯優化功能，還允許用戶根據需求調整變數名長度等設置。然而，UglifyJS，這個國外知名的壓縮工具，多用於開發環境或命令行操作，它在本文測試的jscompress中與babel-minify一起工作，因此沒有單獨列出。

補充測試顯示，UglifyJS的壓縮效果為394位元組，同樣顯示出較強的實力。然而，那些無品牌工具僅能簡單去除代碼的換行和注釋，對代碼結構的優化有限。

綜上所述，專業的JS壓縮工具如JShaman能對代碼進行深度優化和重構，顯著減少代碼體積。因此，建議在選擇JS壓縮工具時，優先考慮那些具備專業優化功能的工具，以獲得最佳的壓縮效果。