程式碼壓縮指南 — HTML、CSS、JS最佳化

在網路上，每個位元組都很重要。載入時間增加100毫秒就可能顯著降低使用者參與度。程式碼壓縮（Minification）是減少HTML、CSS和JavaScript檔案大小的最簡單、最有效的技術之一——它應該是每個正式環境部署流程的一部分。

本指南涵蓋了程式碼壓縮對每種語言的實際作用、與傳輸壓縮的比較以及如何將其整合到工作流程中。您也可以使用我們的程式碼壓縮工具快速壓縮任何程式碼片段。

什麼是程式碼壓縮？

程式碼壓縮是在不改變功能的情況下，從原始碼中刪除不必要字元的過程：

• 註解 — 對開發者有用，但瀏覽器看不到
• 空白 — 用於可讀性的空格、定位字元、換行符
• 冗餘語法 — 可選的分號、引號、關閉標籤
• 長識別符 — 縮短變數和函式名稱（僅限JavaScript）

結果是更小的檔案、更快的下載和更快的瀏覽器解析。

壓縮 vs 傳輸壓縮：它們協同運作

一個常見的誤解是程式碼壓縮和傳輸壓縮（gzip/Brotli）可以互換。實際上它們是互補的。

程式碼壓縮在原始碼層級刪除冗餘字元。

傳輸壓縮（gzip、Brotli）對透過網路傳輸的位元組套用通用壓縮演算法。

為什麼需要兩者：

原始CSS:              28.4 KB
僅程式碼壓縮:         18.2 KB  (減少36%)
僅傳輸壓縮:            7.1 KB  (減少75%)
程式碼壓縮+傳輸壓縮:   5.3 KB  (減少81%)

壓縮後的程式碼能更好地進行傳輸壓縮。始終先進行程式碼壓縮，然後讓伺服器處理傳輸壓縮。

HTML壓縮

HTML壓縮是三者中最保守的。瀏覽器對HTML非常寬容。

什麼會被刪除

註解：

<!-- 之前 -->
<!-- 導覽區段 -->
<nav>
  <!-- 主選單 -->
  <ul>
    <li><a href="/">首頁</a></li>
  </ul>
</nav>

<!-- 之後 -->
<nav><ul><li><a href="/">首頁</a></li></ul></nav>

標籤間不必要的空白：

<!-- 之前 -->
<div>
  <p>
    你好世界
  </p>
</div>

<!-- 之後 -->
<div><p>你好世界</p></div>

可選的關閉標籤：

<!-- 之前 -->
<ul>
  <li>項目一</li>
  <li>項目二</li>
</ul>

<!-- 之後 -->
<ul><li>項目一<li>項目二</ul>

典型HTML節省

HTML壓縮通常將檔案大小減少10–25%。用我們的程式碼壓縮工具親自試試。

CSS壓縮

CSS從壓縮中獲益匪淺，因為樣式表通常有大量註解和充裕的空白格式。

什麼會被刪除

註解和空白：

/* 之前 */
/* 主要按鈕樣式 */
.btn-primary {
  background-color: #3b82f6;
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
}

/* 之後 */
.btn-primary{background-color:#3b82f6;color:#fff;padding:12px 24px;border-radius:8px;font-weight:600}

簡寫轉換：

/* 之前 */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

/* 之後 */
margin:10px 20px

色彩最佳化：

/* 之前 */
color: #ffffff;
background: #aabbcc;

/* 之後 */
color:#fff;background:#abc

典型CSS節省

CSS壓縮通常將檔案大小減少20–40%。

JavaScript壓縮

JavaScript壓縮是最積極的，因為該語言允許超越簡單空白刪除的轉換。

什麼會被刪除和轉換

註解、空白和變數名縮短：

// 之前
// 計算含稅總價
function calculateTotal(price, taxRate) {
  const tax = price * taxRate;
  return price + tax;
}

// 之後
function calculateTotal(n,t){const a=n*t;return n+a}

壓縮器還縮短了變數名稱：price變成了n，taxRate變成了t，tax變成了a。這稱為混淆（mangling）。

死碼消除：

// 之前
function processData(data) {
  if (false) {
    console.log('這永遠不會執行');
  }
  return data.map(item => item.value);
}

// 之後
function processData(d){return d.map(i=>i.value)}

典型JavaScript節省

JavaScript壓縮通常將檔案大小減少30–60%。

節省摘要

何時不應壓縮

開發過程中

壓縮後的程式碼幾乎無法閱讀。保持開發建構未壓縮。

開源函式庫

發佈未壓縮的原始碼。讓使用者在自己的建構中進行壓縮。

非常小的檔案

200位元組的內嵌腳本不需要壓縮。將壓縮工作集中在超過1KB的檔案上。

Source Map：保持壓縮程式碼可除錯

Source map將壓縮的正式環境程式碼與原始原始碼連接起來。

//# sourceMappingURL=app.min.js.map

Source map最佳實務：

• 在建構管線中產生source map，但不要在正式環境中公開提供
• 將source map上傳到錯誤追蹤服務（Sentry、Bugsnag）
• 在webpack/Vite中使用hidden source map選項

建構管線整合

webpack

const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  mode: 'production',
  optimization: {
    minimizer: [new TerserPlugin(), new CssMinimizerPlugin()],
  },
};

Vite

export default {
  build: {
    minify: 'esbuild',
    cssMinify: true,
  },
};

esbuild

esbuild app.js --bundle --minify --outfile=app.min.js

Rollup

import terser from '@rollup/plugin-terser';
export default { plugins: [terser()] };

無需建構工具的快速壓縮

並非所有任務都需要完整的建構管線。對於一次性任務，我們的程式碼壓縮工具在瀏覽器中處理HTML、CSS和JavaScript——無需安裝，無需設定，不向伺服器傳送資料。

對於資料格式，我們還提供JSON壓縮工具和YAML壓縮工具。

壓縮檢查清單

1. 所有CSS和JS檔案已壓縮
2. Source map已產生
3. HTML已壓縮
4. 傳輸壓縮已啟用 — 驗證Content-Encoding: gzip或br
5. 開發建構未壓縮
6. console.log已移除
7. 無雙重壓縮

相關資源

• 網頁圖片最佳化 — 減少頁面最大的體積貢獻者
• YAML壓縮指南 — 壓縮設定檔的技術
• Web開發者工具清單 — 每個工作流程必備的工具

開始壓縮

程式碼壓縮是一種低投入、高回報的最佳化。

開啟程式碼壓縮工具 → — 貼上HTML、CSS或JavaScript，即時取得最佳化輸出。無需註冊，無需安裝，完全私密。