Taro - 解决H5发布升级在微信、浏览器的缓存问题

发表时间：2021-1-6

发布人：葵宇科技

浏览次数：96

问题：

我们每次发布H5更新的时候总会遇到这样的问题，用户在微信中看到的H5页面是没有改动过的，但是我们明明已经更新了H5，只能清理缓存才能看到最新的修改。

原因：

因为微信官方的web-view 是会缓存页面静态资源的比如：js、css、图片等，优先显示的缓存中的资源，过一段时间（时间不定，一天或者几小时，无明显规律）是可以自动进行缓存清除的，但是对于当时用户来说想要第一时间就看到正确的页面。

如何解决呢？

我们可以对Taro项目的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',
    },
    ...
  },
}

我来解释下，咱们配置了静态文件的目录，然后每次通过npm run build:h5命令打包程序的时候，会自动将静态资源文件后面追加hash数值（见截图），这样静态文件发生变化的时候会生成新的hash值，这样每次发包的静态文件路径就是不同的了，所以升级版本就避免了缓存的问题。