更新發布的考量

Table of contents

方案介紹

如果每次部署都會清除並重新生成 dist 資料夾中的資源，這確實會影響使用者的載入速度，因為他們需要重新下載所有資源。以下是幾種改善方案，以減少使用者的重新下載需求並優化載入速度：

  1. 啟用資源版本控制（Cache Busting）

    • 緩存策略：只要沒有更新的資源，不會清除舊的靜態資源文件。使用資源版本控制（例如帶有哈希值的檔案名稱，如 style.abc123.css），可以讓更新的檔案名稱不同而不影響舊資源的緩存。 • 如何啟用：VuePress 和大多數前端框架內建哈希資源名稱生成。例如 style.css 在構建後可能會變成 style.abc123.css。這樣只有真正變更的資源檔案會被重新載入。

  2. Nginx / CDN 快取設置

    • 若您已轉移到 Nginx，或使用 CDN（如 Cloudflare），可以針對特定資源（如 CSS、JS、圖片）設定長期快取（例如一年）。同時使用短期快取來處理 HTML 檔案（例如幾分鐘或幾小時）。 • 快取策略範例：

location / { expires 1y; # 將 CSS/JS 設定為一年快取 add_header Cache-Control “public”; }

location ~* .(html)$ { expires 5m; # HTML 短期快取 add_header Cache-Control “no-store”; }

  1. 使用 Service Worker 緩存策略

    • Service Worker 可用於離線快取和更細緻的快取控制。您可以設置 Service Worker 來緩存靜態資源，在使用者首次載入後保留在瀏覽器中。此方法適合需要減少網頁伺服器負擔的靜態網站。 • VuePress 設置 Service Worker：可以使用 vuepress-plugin-pwa 插件，以支援 PWA 和 Service Worker 快取策略。

  2. 避免過於頻繁的發布

    • 若內容頻繁更新，建議在實際發布前，進行多次測試或累積多個更動後再發布，以減少使用者重新載入的頻率。

  3. 考慮增量更新

    • 部分 CDNs 支援只更新變更過的資源，這樣使用者只需要載入新的部分。例如 Netlify 或 Vercel 這樣的平臺可以做到增量發布而不需要每次全量更新。

綜合這些方法，您可以減少使用者的頻繁重新下載需求，提升網站的載入速度。Nginx 快取結合資源版本控制應是解決網路壅塞的有效方法。