我們一起聊聊如何清除CSS緩存

1. 清除CSS快取

清除CSS快取通常是指瀏覽器儲存了舊版的CSS文件，導致即使更新了文件，頁面樣式也沒有變化。

要解決這個問題，可以採取以下幾種方法：

1.1. 開發者操作：

1. 強制刷新頁面：

• 在Chrome或Firefox中按Ctrl + Shift + R（Windows/Linux） 或Cmd + Shift + R（Mac）來刷新頁面，這會強制瀏覽器重新載入資源，而不是使用快取。

2. 清除瀏覽器快取：

• 進入瀏覽器的設置，找到隱私或進階設定中的清除瀏覽資料選項，選擇清除快取檔案和圖片。

3. 檢查控制台錯誤：

• 使用瀏覽器開發者工具檢查網路面板(Network)，查看是否有CSS檔案載入失敗或狀態碼為304（未修改）。

1.2. 代碼層面

1. 修改檔案名稱

每次發布新版本時，可以手動修改CSS檔案的名字，例如從styles.css 改為styles_v2.css。

2. 新增查詢字串

在HTML中引用CSS檔案時，可以在URL後面加上一個版本號碼或時間戳記作為查詢字串的一部分，例如：

<link rel="stylesheet" href="styles.css?v=1.0">

• 或使用時間戳：

  <link rel="stylesheet" href="styles.css?ts=1607768852">

3. 使用哈希值

建置工具如Webpack可以自動為檔案名稱加上雜湊值，確保每次建置後的檔案名稱都是唯一的，例如：

<link rel="stylesheet" href="styles.e4bca2d.css">

1.3. 服務端配置

• HTTP快取頭

在伺服器端設定適當的HTTP回應頭，如Cache-Control 和Expires，來控制快取的時間長度。例如，可以設定短時間內的快取：

Cache-Control: max-age=3600

或設定長一點的時間，但需要配合版本控製或雜湊值來確保不會使用過期的資源：

Cache-Control: max-age=31536000

這些方法可以幫助你在不同的場景下有效管理和清除CSS快取。根據專案的實際情況和技術堆疊選擇最適合的方法。