如何能避免清理浏览器缓存？

Question

我的web项目一旦有前端页面的更新就需要清理浏览器缓存后才能看到最新效果，有时不清理不但不能看到最新效果还会出现页面布局错乱，如何能避免这种情况，我想要更新前端页面，用户也不需要清理浏览器缓存，页面关闭重新打开就能显示最新效果

Answer 1

1. 构建的时候给资源加 hash
2. 首页不设缓存时间
3. 部署时不清理旧文件

Answer 2

问题标题含义差异太大了。
你这个问题，解决办法是 .html 文件不应该设置（或者说是应该关闭） http 的缓存策略。

Answer 3

关于 前端页面的更新就需要清理浏览器缓存后才能看到最新效果 的部分：

1. 给你的项目编译时文件增加 hash 值，一般各种CLI默认都会有这个功能。比如说VueCLI的这块配置项 #filenameHashing - 配置参考 | Vue CLI
2. 在Nginx等HTTP服务中给 index.html 开启不缓存，其他(CSS、JS、图片等等）资源文件开启缓存。

这样一般情况下就可以避免用户出现缓存的问题了，但要保证客户端是现代浏览器，很多国产的魔改浏览器是默认强缓存的（比如说微信内置的浏览器/dog），所以需要给 index.html 不缓存的同时设置缓存时间为 0，或者 -1。

---

关于 有时不清理不但不能看到最新效果还会出现页面布局错乱 的部分：

• 可能是因为你每次部署的时候清理掉了之前部署的文件，所以每次部署的时候不删除上一次部署的文件就不会有这样的情况了，每次更新的时候覆盖上去就好。
• 比如说很多情况下我们使用Jenkins或者其他自动化工具部署时会 rm -rf html_dist 来清理掉前端的旧文件然后再把新的文件部署上去。

如果你不会做缓存配置的话，和运维或者负责服务器的后端同学说明一下情况。让他们配置一下 Nginx 就可以解决你说的这两个问题了。