在移動端，我們為了解決帶寬限制或者網絡緩慢等問題，常常會使用http協議緩存靜態文件(http緩存簡介)，從而減少網絡請求，加快首屏加載時間。緩存雖然給我們帶來了性能上的優化，但是也會帶來一些問題，如最常見的問題就是：系統升級后文件未更新，需要手動進行刷新。要解決這個問題，要分以下幾種情況：

1、傳統的多頁面應用

我們一般使用時間戳或者版本號等標記html、css、js等文件，例如：原有的html文件為：index.html?v=1598443151546,系統升級后以時間戳為標志的html文件為：index.html?v=1599463092282,這樣用戶訪問新的頁面時，瀏覽器會返回新的文件。可以使用構建工具gulp、grunt等的對應的插件對靜態文件進行自動化處理。

2、基于webpack單入口的單/多頁面應用

現在流行的react、vue等框架都使用了虛擬DOM(virtual DOM)技術，html文件主要的作用是提供一個可以綁定的dom容器節點，所有的業務邏輯都在對應的編譯后的js文件里面。所以單/多頁面應用的html文件是利用html-webpack-plugin創建出來的，然后引入其他的js、css等文件。

webpack編譯后的文件緩存策略和其hash有關，webpack有各種hash值，包括每次項目構建hash，不同入口的chunkhash、文件的內容contenthash，這么多hash，它們有什么區別呢？

hash

hash是跟整個webpack構建項目相關的，每次項目構建hash對應的值都是不同的，即使項目文件沒有做“任何修改”。其實運行webpack打包都是有修改的，因為每次webpack打包編譯都會注入webpack的運行時代碼，導致整個項目有變化，所以每次hash值都會變化的。

chunkhash

chunkhash根據不同的入口文件(Entry)進行依賴文件解析、構建對應的chunk，生成對應的哈希值。在生產環境里把一些公共庫和程序入口文件區分開，單獨打包構建，接著我們采用chunkhash的方式生成哈希值，那么只要我們不改動公共庫的代碼，就可以保證其哈希值不會受影響。并且webpack4中支持了異步import功能，固chunkhash也作用于此，如下：

image

我們將各個模塊的hash值 (除主干文件) 改為chunkhash，然后重新build一下，可得下圖：

image

我們可以清晰地看見每個chunk模塊的hash是不一樣的了。

但是這樣又有一個問題，因為我們是將樣式作為模塊import到JavaScript文件中的，所以它們的chunkhash是一致的，如test1.js和test1.css：

image

這樣就會有個問題，只要對應css或則js改變，與其關聯的文件hash值也會改變，但其內容并沒有改變呢，所以沒有達到緩存意義。固contenthash的用途隨之而來。

contenthash

contenthash是針對文件內容級別的，只有你自己模塊的內容變了，那么hash值才改變，所以我們可以通過contenthash解決上訴問題。如下：

image

2.1 js、css、圖片等靜態文件

由于webpack的特性，很容易配置好相關參數，使每次修改過js、css等文件后，引用的文件名稱都會改變(例如上面的利用chunkhash設置文件名)，瀏覽器請求對應的文件時都會重新獲取，而不使用緩存。

2.2 html靜態文件

因為html文件是通過html-webpack-plugin生成的，默認為index.html，一般情況下每次編譯生成的文件名不會改變。所以有可能會出現，系統更新后，用戶訪問的index.html文件是緩存中保存的上次的文件，需要用戶手動去刷新。

解決辦法：

1、一般設置了靜態文件的緩存，都會設置文件的協商緩存。所以每次請求下載文件時，都會返回一個http響應Last-Modified:文件修改時間1。用戶訪問文件會在http請求頭帶上If-Modify-Since：文件修改時間1，當后臺發現文件在修改時間1之后都沒有修改，會返回304，告訴客戶端從緩存里面獲取文件；當系統更新后，文件修改時間變為修改時間2，此時用戶訪問文件會在http請求頭帶上If-Modify-Since：文件修改時間1，后臺會返回200，并且返回最新的文件，所以設置了協議緩存后，返回的html都是最新的文件。

2、按照協商緩存原則，設置了協議緩存后，不會出現修改后文件獲取不到問題，但是由于移動端的客戶端比較繁雜，內核不同，封裝的方法千奇百怪，所有也可能會出現設置協商緩存后，更新文件后，還是獲取緩存的文件問題。這時候可以嘗試用強緩存去解決這個問題，在nginx配置，訪問html文件時，強制不緩存：

設置所有的html文件強制不緩存：

location ~ .*.(htm|html)?$ {

add_header Cache-Control "no-store, no-cache";

}

設置某個目錄下的html文件強制不緩存：

location /user {

if ($request_filename ~* .*\.(?:htm|html)$)

{

add_header Cache-Control "no-store, no-cache";

add_header Pragma no-cache;

add_header Expires 0;

}

}

參考目錄：

總結

以上是生活随笔為你收集整理的app中html静态页面缓存,移动端index.html被缓存问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。