JavaScript 與 CSS 壓縮

功能簡介

壓縮（minify）會移除瀏覽器執行程式碼時不需要的一切：空白、換行、註解和冗長的名稱。檔案越小下載越快，能改善頁面載入時間和 Core Web Vitals，在行動網路上尤其明顯。

這個工具用 Terser 壓縮 JavaScript，它也是 webpack、Rollup 和 Vite 採用的壓縮器；並用 CSSO 壓縮 CSS，CSSO 還會重組樣式表：縮短顏色（#ffffff 變成 #fff）、移除多餘的單位和值（0px 0px 變成 0），並合併選擇器或宣告相同的規則。

使用方法

1. 把程式碼貼到 輸入 框、把 .js 或 .css 檔案拖進去，或點 範例。
2. 選擇 JavaScript 或 CSS。
3. 對於 JavaScript，縮短變數名稱 會把區域變數和參數改名為單一字母。匯出的名稱和全域名稱絕不會被更動。
4. 對於 CSS，合併重複規則 會把宣告相同的規則合併在一起。
5. 複製或下載結果。每個框下方的大小計數器會顯示你省下了多少。

如果 JavaScript 有語法錯誤，錯誤訊息會標出行號和欄號，讓你直接跳過去。

範例

// Sum the price of every item
export function cartTotal(items, discountPercent = 0) {
  const subtotal = items.reduce(function (sum, item) {
    return sum + item.price * item.quantity
  }, 0)
  return subtotal * (1 - discountPercent / 100)
}

會變成

export function cartTotal(t,r=0){return t.reduce(function(t,r){return t+r.price*r.quantity},0)*(1-r/100)}

什麼時候使用

適合臨時的一次性需求：給 CDN 用的程式碼片段、HTML 電子郵件中的內嵌指令碼、書籤小程式（bookmarklet），或看看一個函式庫最小能壓到多小。在正式專案中，應該由打包工具在每次建置時自動壓縮，讓原始碼保持可讀。