Taro - 解决H5发布升级在微信、浏览器的缓存问题 - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

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
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

相关案例查看更多