移动端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，它们有什么区别呢？

1. hash
   hash是跟整个webpack构建项目相关的，每次项目构建hash对应的值都是不同的，即使项目文件没有做“任何修改”。其实运行webpack打包都是有修改的，因为每次webpack打包编译都会注入webpack的运行时代码，导致整个项目有变化，所以每次hash值都会变化的。
2. chunkhash
   chunkhash根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的哈希值。在生产环境里把一些公共库和程序入口文件区分开，单独打包构建，接着我们采用chunkhash的方式生成哈希值，那么只要我们不改动公共库的代码，就可以保证其哈希值不会受影响。并且webpack4中支持了异步import功能，固chunkhash也作用于此，如下：
   
   

   image
   
   我们将各个模块的hash值 (除主干文件) 改为chunkhash，然后重新build一下，可得下图：
   
   

   image
   
   我们可以清晰地看见每个chunk模块的hash是不一样的了。
   但是这样又有一个问题，因为我们是将样式作为模块import到JavaScript文件中的，所以它们的chunkhash是一致的，如test1.js和test1.css：
   
   

   image
   
   这样就会有个问题，只要对应css或则js改变，与其关联的文件hash值也会改变，但其内容并没有改变呢，所以没有达到缓存意义。固contenthash的用途随之而来。
3. contenthash
   contenthash是针对文件内容级别的，只有你自己模块的内容变了，那么hash值才改变，所以我们可以通过contenthash解决上诉问题。如下：
   
   

   image

2.1 js、css、图片等静态文件

由于webpack的特性，很容易配置好相关参数，使每次修改过js、css等文件后，引用的文件名称都会改变（例如上面的利用chunkhash设置文件名），浏览器请求对应的文件时都会重新获取，而不使用缓存。

2.2 html静态文件

因为html文件是通过html-webpack-plugin生成的，默认为index.html，一般情况下每次编译生成的文件名不会改变。所以有可能会出现，系统更新后，用户访问的index.html文件是缓存中保存的上次的文件，需要用户手动去刷新。
解决办法：
1、一般设置了静态文件的缓存，都会设置文件的协商缓存。所以每次请求下载文件时，都会返回一个http响应Last-Modified:文件修改时间1。用户访问文件会在http请求头带上If-Modify-Since：文件修改时间1，当后台发现文件在修改时间1之后都没有修改，会返回304，告诉客户端从缓存里面获取文件；当系统更新后，文件修改时间变为修改时间2，此时用户访问文件会在http请求头带上If-Modify-Since：文件修改时间1，后台会返回200，并且返回最新的文件，所以设置了协议缓存后，返回的html都是最新的文件。
2、按照协商缓存原则，设置了协议缓存后，不会出现修改后文件获取不到问题，但是由于移动端的客户端比较繁杂，内核不同，封装的方法千奇百怪，所有也可能会出现设置协商缓存后，更新文件后，还是获取缓存的文件问题。这时候可以尝试用强缓存去解决这个问题，在nginx配置，访问html文件时，强制不缓存：

• 设置所有的html文件强制不缓存：

 location ~ .*.(htm|html)?$ {
   add_header Cache-Control "no-store, no-cache";
}

• 设置某个目录下的html文件强制不缓存：

 location /user {       
        if ($request_filename ~* .*\.(?:htm|html)$)
        {
            add_header Cache-Control "no-store, no-cache";
            add_header Pragma no-cache;
            add_header Expires 0;
        }
    }

参考目录：

• http缓存简介mdn
• Web缓存系列
• webpack中hash、chunkhash、contenthash区别
• 前端重定向，index.html文件被浏览器缓存
• nginx缓存静态文件但不缓存Index.html