Taro - 解决H5发布升级在微信、浏览器的缓存问题
发表时间:2021-1-6
发布人:葵宇科技
浏览次数:120
问题:
我们每次发布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值,这样每次发包的静态文件路径就是不同的了,所以升级版本就避免了缓存的问题。
打包后的文件截图:
作者:汗青fullstack
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。