需要避免每次構建瀏覽器刷新的情況

Question

在我們的項目中，我們遵循頻繁的部署過程。隨着每次部署，我們的客戶端必須刷新瀏覽器以反映由於瀏覽器緩存而導致的更改。我想知道我們如何避免這種情況。即，當我們部署它時，應該直接反映在所有用戶瀏覽器中，而不需要刷新。請幫我解決這個問題。

Answer 1

技術上你不能刷新瀏覽器緩存，因爲你沒有直接訪問那裏。你可以做的是緩存清除。每次部署到服務器時都會更改您的js和css文件名。

例如

app_v1.js app_v2.js ...

和

app_v1.css app_v2.css ...

在這種方式每次你部署瀏覽器將被迫獲得新的js和css文件。

更多信息，檢查此鏈接

https://css-tricks.com/strategies-for-cache-busting-css/

Answer 2

有一個叫熱模塊的更換方案。這無縫地取代你的webpack包（假設你已經在使用它）。

查看What exactly is Hot Module Replacement in Webpack?的一些參考。 HMR設置相當複雜，每個框架都不相同。

webpack-dev-server也依賴於webpack，但它更簡單：它自動爲您推送刷新按鈕。

Answer 3

考慮更新響應頭中的高速緩存指令以減少或刪除瀏覽器高速緩存允許的高速緩存持續時間。

要查看您的網站目前正在使用什麼，請使用啓用「檢查」選項並選擇「網絡」選項卡的Chrome查看頁面。然後選擇一個下載的文件來查看「Response Headers」信息。

舉例來說，本SO頁面下載了一個名爲ados.js的腳本文件，該腳本文件的「max-age」值爲604800（秒，7天）。這是瀏覽器在檢查Web服務器是否有更新版本的文件之前可以等待的時間。如果文件幾乎從未改變，那麼7天可能是可以容忍的。

然而，7天的最大年齡可能太長了在瀏覽器緩存文件被頻繁改變的動態情況下的持續時間。

欲瞭解更多信息，請參閱此MDN頁面HTTP caching。

更改緩存控制指令取決於您的Web服務器。 對於ASP.NET，可以在web.config文件中完成。

要考慮的一個選項是兩階段發佈方法。

階段1：在釋放之前將緩存控制指令更改爲不緩存，以便任何即將發佈的即將更新的緩存文件。

然後等待更新文件當前將其最大年齡值設置爲的最長持續時間。這使得當前的網站瀏覽器可以獲取「無緩存」指令。然後，所有當前網站瀏覽器都已準備好在文件更新發布後立即提取更新。

階段2：使用所需的max-age緩存控制指令將文件更新發布到網站。由於在階段1中完成了這些更新，因此應立即提取這些更新。

另一種方法是將當前最大年齡值縮短爲較小的值，例如5分鐘。此選項更簡單，但在發佈後的5分鐘內可能會出現問題。然而，更短的時間跨度降低了對緩存的瀏覽器文件進行更新的可能性和/或影響。

Answer 4

您可以通過從前端破壞緩存來防止緩存。

您可以添加一個v={{number-of-version}}，並且您將始終確保加載的版本是您想要的版本。

有一個吞噬插件，它會在構建階段處理文件的版本，所以你不必手動完成。它非常方便，您可以輕鬆將其集成到構建過程中。這裏的鏈接gulp-annotate