實用工具
輸入
結果
結果會顯示在這裡。terser 是 webpack 在 production 模式下預設執行的壓縮工具,也是 Vite 和 Rollup 在你追求最小輸出時提供的選項。貼上指令碼,就能用同樣的方式壓縮:移除無用程式碼與多餘的運算式、縮短區域名稱、刪除空白。結果會顯示節省的位元組數;在瀏覽器支援 CompressionStream 時,還會顯示 gzip 前後的大小——這才是實際在網路上傳輸的數字。
它是怎麼運作的
- 壓縮會分兩輪改寫程式碼——內嵌常數、刪除無法到達的分支、摺疊運算式——混淆則會縮短區域變數與參數的名稱。
- 除非你將輸入標記為 ES 模組,否則頂層名稱不會更動,因為傳統指令碼的全域變數可能被網頁上的其他指令碼使用。
- 以 /*! 開頭或包含 @license、@preserve 的註解會保留,這是多數授權條款的要求。
- ECMAScript 版本決定 terser 可以輸出哪些語法——ES5 絕不會出現箭頭函式——但你自己寫的新語法不會被向下轉譯。
你的資料去了哪裡
哪也沒去。本工具完全在你的瀏覽器裡執行:你貼上的文字由頁面處理,不會傳輸到任何伺服器,也不會寫進任何紀錄。
本工具免費且免登入,執行結果只存在於你目前的頁面裡,不會被儲存到任何地方。
它要花多少
本工具完全免費,不需要登入,也不消耗點數。
常見問題
- 為什麼 gzip 後的節省比原始的少?
- 因為 gzip 本身就會消除許多相同的冗餘:重複的空白與冗長、反覆出現的識別字都能壓縮得很好。所以原始大小上可觀的節省,在兩邊都經過 gzip 後會縮小。那個較小的數字依然是真實的,估算傳輸大小時應該看它。
- 壓縮會弄壞我的程式碼嗎?
- terser 的預設轉換針對標準 JavaScript 設計,是安全的。會出問題的,是在執行階段依賴函式或類別名稱的程式碼(Function.prototype.name、某些相依性注入的設定),或透過 toString() 讀取自身原始碼的程式碼。關閉名稱混淆,就能確認問題是否出在名稱上。
- 移除 console 呼叫會做什麼?
- 它會從壓縮後的輸出中刪除 console.log、console.warn 以及其他所有 console.* 呼叫。對正式環境的打包檔很方便;但如果你依賴 console.error 從使用者的瀏覽器回報錯誤,就會造成傷害。這個選項只在開啟壓縮時生效。
- 能壓縮 TypeScript 或 JSX 嗎?
- 不能,terser 只讀取 JavaScript,遇到第一個型別註記或 JSX 標籤就會回報語法錯誤。請先用 tsc、esbuild 或 Babel 編譯 TypeScript 與 JSX,再壓縮它們產出的 JavaScript。
背後的開源專案
本工具執行在 terser/terser 之上,以 BSD-2-Clause 授權發布。如果你需要在自己的程式裡實作同樣的能力,直接用這個函式庫。
terser/terser也常被稱作
- javascript 壓縮
- js minify 線上
- terser 線上
- js 壓縮工具
- javascript minifier
- uglify js