什麼是JS程式碼壓縮工具？
JS 壓縮工具使用 Terser 引擎，透過移除空白字元、註解並縮短變數名稱來壓縮 JavaScript 程式碼。這可縮小檔案大小，加快頁面載入速度，降低頻寬費用，同時保留程式碼的完整功能。
壓縮器在本機使用 Terser 處理程式碼:去除空白與註解,啟用 mangle 後把區域變數改為單字母,啟用 compress 後做安全的 AST 變換,並可移除 console.log。工具會顯示原始大小、壓縮後大小以及節省百分比,方便上線前確認效果。
使用方法
- 將 JavaScript 程式碼貼入輸入編輯器，或直接上傳 .js 檔案。
- 選擇壓縮選項：開啟變數名稱混淆（縮短變數名稱）、壓縮等級，以及是否移除 console.log。
- 點擊「壓縮」處理程式碼。查看檔案大小縮減比例，然後下載壓縮後的檔案或複製到剪貼簿。
何時使用
- 把 JS 套件壓縮後丟到沒有建置步驟的 CDN。
- 把第三方函式庫貼進 CMS 佈景前,先移除註解和 console 語句。
- 為客服小工具、廣告像素或外部 script 標籤產出一次性壓縮版本。
結果
您有一個 45KB 的工具函式庫，包含大量註解和冗長的變數名稱。將其貼入，啟用變數名稱混淆與壓縮，即可得到 12KB 的輸出——壓縮率達 73%，可直接用於正式環境部署。
常見問題
- 壓縮會不會弄壞程式?
- Terser 預設保守、力求保留語意。mangle 只重新命名未匯出的變數,compress 不會做無法證明安全的轉換。若程式依賴 Function.name 或對原始碼做 eval,就針對該檔關閉 mangle。
- 通常能縮小多少?
- JavaScript 一般可縮小 40% 到 70%。註解多、變數名長、含大量無用分支的程式縮得多;原本緊湊或多為字串字面量的程式縮得少。再經 gzip 之後差距會更小。
- minify、compress、mangle 三者有何不同?
- minify 是統稱。compress 在語法層做常數摺疊與刪除死分支;mangle 把識別字改為短名。三者可以單獨啟用,通常一起開啟才會得到最小輸出。
- 伺服器會做 gzip 或 brotli,還需要先 minify 嗎?
- 需要。gzip 處理的是文字的冗餘,並不會把長變數名換掉,也不會刪除無效分支。先 minify 過的程式經 gzip 之後仍更小,載入後解析也更快。兩道工序是相加,而非重複。
- 支援 TypeScript 或 ES2022 等較新語法嗎?
- 純 TypeScript 必須先編譯為 JS,因為 Terser 只吃 JavaScript。直到 ES2022 的現代語法(私有欄位、頂層 await、可選串接)都能直接解析,無須 Babel 轉換。