Taro - 解決H5發布升級在(zài)微信、浏覽器的(de)緩存問題

發表時(shí)間：2021-1-6

發布人(rén)：融晨科技

浏覽次數：138

問題：

我們每次發布H5更新的(de)時(shí)候總會遇到(dào)這(zhè)樣的(de)問題，用戶在(zài)微信中看到(dào)的(de)H5頁面是(shì)沒有改動過的(de)，但是(shì)我們明明已經更新了(le／liǎo)H5，隻能清理緩存才能看到(dào)最新的(de)修改。

原因：

因爲(wéi / wèi)微信官方的(de)web-view 是(shì)會緩存頁面靜态資源的(de)比如：js、css、圖片等，優先顯示的(de)緩存中的(de)資源，過一段時(shí)間（時(shí)間不(bù)定，一天或者幾小時(shí)，無明顯規律）是(shì)可以(yǐ)自動進行緩存清除的(de)，但是(shì)對于(yú)當時(shí)用戶來(lái)說(shuō)想要(yào / yāo)第一時(shí)間就(jiù)看到(dào)正确的(de)頁面。

如何解決呢？

我們可以(yǐ)對Taro項目的(de)config/index.js文件，進行如下配置：

const config = {
  ...
  h5: {
    publicPath: '/',
    staticDirectory: 'static',
    output: {
      filename: 'js/[name].[hash].js',
      chunkFilename: 'js/[name].[chunkhash].js'
    },
    imageUrlLoaderOption: {
      limit: 5000,
      name: 'static/images/[name].[hash].[ext]'
    },
    miniCssExtractPluginOption: {
      filename: 'css/[name].[hash].css',
      chunkFilename: 'css/[name].[chunkhash].css',
    },
    ...
  },
}

我來(lái)解釋下，咱們配置了(le／liǎo)靜态文件的(de)目錄，然後每次通過npm run build:h5命令打包程序的(de)時(shí)候，會自動将靜态資源文件後面追加hash數值（見截圖），這(zhè)樣靜态文件發生變化的(de)時(shí)候會生成新的(de)hash值，這(zhè)樣每次發包的(de)靜态文件路徑就(jiù)是(shì)不(bù)同的(de)了(le／liǎo)，所以(yǐ)升級版本就(jiù)避免了(le／liǎo)緩存的(de)問題。