實用工具

JavaScript 壓縮工具

用 terser 壓縮 JavaScript——壓縮最佳化、名稱混淆、指定 ECMAScript 版本——並查看 gzip 前後的大小。

瀏覽器本機執行程式碼轉換9336
免費

輸入

0 B

結果

結果會顯示在這裡。

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