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

1、傳統(tǒng)的多頁面應(yīng)用

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

2、基于webpack單入口的單/多頁面應(yīng)用

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

webpack編譯后的文件緩存策略和其hash有關(guān)，webpack有各種hash值，包括每次項目構(gòu)建hash，不同入口的chunkhash、文件的內(nèi)容contenthash，這么多hash，它們有什么區(qū)別呢？

hash

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

chunkhash

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

image

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

image

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

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

image

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

contenthash

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

image

2.1 js、css、圖片等靜態(tài)文件

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

2.2 html靜態(tài)文件

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

解決辦法：

1、一般設(shè)置了靜態(tài)文件的緩存，都會設(shè)置文件的協(xié)商緩存。所以每次請求下載文件時，都會返回一個http響應(yīng)Last-Modified:文件修改時間1。用戶訪問文件會在http請求頭帶上If-Modify-Since：文件修改時間1，當(dāng)后臺發(fā)現(xiàn)文件在修改時間1之后都沒有修改，會返回304，告訴客戶端從緩存里面獲取文件；當(dāng)系統(tǒng)更新后，文件修改時間變?yōu)樾薷臅r間2，此時用戶訪問文件會在http請求頭帶上If-Modify-Since：文件修改時間1，后臺會返回200，并且返回最新的文件，所以設(shè)置了協(xié)議緩存后，返回的html都是最新的文件。

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

設(shè)置所有的html文件強制不緩存：

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

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

}

設(shè)置某個目錄下的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;

}

}

參考目錄：

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。