app中html静态页面缓存,移动端index.html被缓存问题

在移动端，我们为了解决带宽限制或者网络缓慢等问题，常常会使用http协议缓存静态文件(http缓存简介)，从而减少网络请求，加快首屏加载时间。缓存虽然给我们带来了性能上的优化，但是也会带来一些问题，如最常见的问题就是：系统升级后文件未更新，需要手动进行刷新。要解决这个问题，要分以下几种情况：

1、传统的多页面应用

我们一般使用时间戳或者版本号等标记html、css、js等文件，例如：原有的html文件为：index.html?v=1598443151546,系统升级后以时间戳为标志的html文件为：index.html?v=1599463092282,这样用户访问新的页面时，浏览器会返回新的文件。可以使用构建工具gulp、grunt等的对应的插件对静态文件进行自动化处理。

2、基于webpack单入口的单/多页面应用

现在流行的react、vue等框架都使用了虚拟DOM(virtual DOM)技术，html文件主要的作用是提供一个可以绑定的dom容器节点，所有的业务逻辑都在对应的编译后的js文件里面。所以单/多页面应用的html文件是利用html-webpack-plugin创建出来的，然后引入其他的js、css等文件。

webpack编译后的文件缓存策略和其hash有关，webpack有各种hash值，包括每次项目构建hash，不同入口的chunkhash、文件的内容contenthash，这么多hash，它们有什么区别呢？

hash

hash是跟整个webpack构建项目相关的，每次项目构建hash对应的值都是不同的，即使项目文件没有做“任何修改”。其实运行webpack打包都是有修改的