js浏览器缓存

浏览器缓存,HTTP缓存有多种规则，根据是否需要重新向服务器发起请求来分类，
我将其分为强制缓存，对比缓存（协商缓存）。

http缓存可以帮助服务器提高并发性能

协商缓存通过 ETag与Last - Modified
强缓存通过 expires和cache - control控制
expires是绝对时间
cache - control是相对时间
Last - Modified有精度问题 到秒
ETag没有精度问题只要文件改变e - tag就改变

强缓存

一般，我们会设置Cache-Control的值为“public, max-age=xxx”，表示在xxx秒内再次访问该资源，均使用本地的缓存，不再向服务器发起请求。
显而易见，如果在xxx秒内，服务器上面的资源更新了，客户端在没有强制刷新的情况下，看到的内容还是旧的。如果说你不着急，可以接受这样的，那是不是完美？然而，很多时候不是你想的那么简单的，如果发布新版本的时候，后台接口也同步更新了，那就gg了。有缓存的用户还在使用旧接口，而那个接口已经被后台干掉了。怎么办？

协商缓存

协商缓存最大的问题就是每次都要向服务器验证一下缓存的有效性，似乎看起来很省事，不管那么多，你都要问一下我是否有效。但是，对于一个有追求的码农，这是不能接受的。每次都去请求服务器，那要缓存还有什么意义。

实践

缓存的意义就在于减少请求，更多地使用本地的资源，给用户更好的体验的同时，也减轻服务器压力。所以，最佳实践，就应该是尽可能命中强缓存，同时，能在更新版本的时候让客户端的缓存失效。
在更新版本之后，如何让用户第一时间使用最新的资源文件呢？机智的前端们想出了一个方法，在更新版本的时候，顺便把静态资源的路径改了，这样，就相当于第一次访问这些资源，就不会存在缓存的问题了。

伟大的webpack可以让我们在打包的时候，在文件的命名上带上hash值。

我们可以得出一个较为合理的缓存方案：

HTML：使用协商缓存。
CSS&JS&图片：使用强缓存，文件命名带上hash值。

三种hash的区别

hash：跟整个项目的构建相关，构建生成的文件hash值都是一样的，
只要项目里有文件更改，整个项目构建的hash值都会更改。
chunkhash：根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，
生成对应的hash值。
contenthash：由文件内容产生的hash值，内容不同产生的contenthash值也不一样。

总结

在做前端缓存时，我们尽可能设置长时间的强缓存，
通过文件名加hash的方式来做版本更新。
在代码分包的时候，应该将一些不常变的公共库独立打包出来，使其能够更持久的缓存。

完整地址

https://juejin.cn/post/6844903737538920462