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

问题：

我们每次发布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值，这样每次发包的静态文件路径就是不同的了，所以升级版本就避免了缓存的问题。

打包后的文件截图：

image.png

image.png

原著是一个有趣的人,若有侵权,请通知删除