網站代碼壓縮與最佳化（CSS、JavaScript）完整指南

(1) CSS 壓縮技術

CSS 檔案中常見的空白、換行、註解等都會影響檔案大小，透過壓縮技術可減少文件體積。

✅ CSS 壓縮技巧：

移除空白與換行：

body { 
    background-color: #fff; 
    margin: 0; 
    padding: 0; 
}

壓縮後：

body{background-color:#fff;margin:0;padding:0;}

移除註解：

/* 這是一個註解 */
.container { width: 100%; }

壓縮後：

.container{width:100%;}

使用短代碼與縮寫：

padding: 10px 10px 10px 10px;

縮寫後：

padding: 10px;

(2) CSS 最佳化策略

• ✅ 合併 CSS 文件： 將多個 CSS 文件合併成一個，可減少 HTTP 請求，提高網站載入速度。
• ✅ 使用 CSS Sprites： 將多張小圖合併為一張大圖，透過 background-position 來顯示不同區塊，可減少 HTTP 請求。
• ✅ 啟用 Gzip 或 Brotli 壓縮： 在伺服器端啟用壓縮技術可有效縮小 CSS 檔案大小：

  <IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/css
  </IfModule>

• ✅ 使用工具壓縮 CSS：
  • CSS Minifier
  • CleanCSS
  • PostCSS

(1) JavaScript 壓縮技術

JS 文件通常包含許多不必要的空白、註解與長變數名稱，這些都會影響效能。

✅ JavaScript 壓縮技巧：

移除空白與換行：

function add(a, b) {
    return a + b;
}

壓縮後：

function add(a,b){return a+b;}

變數縮短：

let totalSum = 0;
let numberArray = [1, 2, 3, 4, 5];

縮短後：

let t=0,n=[1,2,3,4,5];

函式合併：

function hello() { console.log("Hello"); }
function world() { console.log("World"); }

合併後：

function hello(){console.log("Hello")};function world(){console.log("World")};

(2) JavaScript 最佳化策略

• ✅ 移除未使用的代碼（Tree Shaking）： 使用 Webpack 等工具可自動移除未使用的 JavaScript 代碼，以減少文件大小。
• ✅ 延遲加載 JavaScript（Lazy Loading）： JavaScript 檔案不應阻塞頁面載入，可使用 defer 或 async 屬性：

  <script src="script.js" defer></script>

  這樣可確保 JS 在 HTML 載入後執行，提升載入速度【9】。
• ✅ 合併與最小化 JavaScript 文件： 多個 JavaScript 文件可合併成一個，減少 HTTP 請求數量。
• ✅ 使用 Gzip 或 Brotli 壓縮 JS 檔案： 與 CSS 相同，透過伺服器壓縮 JS 文件可降低傳輸數據量。
• ✅ JavaScript 壓縮工具：
  • JSCompress
  • UglifyJS
  • Terser