SPA：既能享受水疗，又能尽情放松
切勿缓存索引
使用哈希（指纹）文件名
设置标题
结论
你已经开发出了一个超棒的单页应用，现在准备发布了。太棒了，干得漂亮！不过，哥们儿，先别急着发布，在你迫不及待地把那个妙趣横生的网址发到推特上之前，先花点时间确保你的缓存策略到位。否则，下次推送更新的时候，你可能会遇到大麻烦。
我以亲身经历来说，以下是我学到的……
在深入探讨之前，我想先说明一点：我不会详细讲解具体的设置步骤。每个开发环境都不一样，需要的步骤也不同。我想强调的是，在正式上线之前做好充分的准备工作至关重要，否则，一旦缓存失效，用户将很难从困境中解救出来。
太长不看
- 永远不要缓存索引。设置标
no-store头expires 0。 - 使用打包工具（例如Webpack）来实现带哈希值的版本化文件名。
- 在您的 JS、CSS 和任何其他经常更改的文件中使用<head>
no-cache和<head> 标签。max-age
切勿缓存索引
将索引标头设置为no-store`true` expires 0。这可以确保用户每次启动应用时都能获得最新的索引。这一点非常重要，因为索引会引用所有其他文件（js、css 等），我们需要确保提供的是正确的哈希文件。
使用哈希（指纹）文件名
如果操作正确，这一步应该可以彻底解决你的缓存问题。其策略是，当你修改文件时，打包工具会通过添加哈希值来标记文件名（例如 app.jgm315la0.js）。由于文件名不同，并且索引永远不会被缓存（还记得我上面提到的吗？），因此会使用最新的文件。
设置标题
最后，但同样重要的是，请为其余文件设置响应头。通过Cache-Control响应头，您可以定义用户浏览器如何处理缓存。这一步至关重要，因为如果响应头设置不正确，用户最终可能会一直访问到过期的文件！或者至少在他们清除缓存之前是这样，但并非所有用户都知道要清除缓存。通过设置正确的响应头，您可以确保用户的浏览器按照您的指示运行。
现在，这里并没有什么硬性规定。每个单页应用（SPA）都不一样，所以如何处理Cache-Control请求头完全取决于你。这样做可能有点过度，尤其是在哈希文件上，因为文件名更改时应该清除缓存。但首先，我建议在所有文件（索引文件除外）上都设置请求头no-cache。max-age我这么说是因为你可以先设置，然后在确认哈希文件工作正常后再更改/删除它们。但如果出现问题，浏览器又死死地保留缓存版本，你就无法反其道而行之了。
与它的名字（听起来好像不应该缓存）相反no-cache，该功能指示浏览器始终向服务器询问文件是否已更改。如果没有更改，浏览器将使用缓存的版本。这会带来一个不太理想的后果，即发送一个请求（尽管请求量非常小），但可以确保浏览器始终检查是否应该使用缓存版本，而不是想当然地认为应该始终使用缓存版本。
max-age它会给文件设置一个“过期”日期。文件首次下载时会被赋予这个最长使用期限。一旦超过这个期限，文件就会被视为过期，需要重新下载。
如果对如何处理特定文件类型的标头有疑问，请参考Google 的Cache-Control策略决策树。
结论
好了，以上就是全部内容。这绝非一份详尽的指南，关于缓存还有很多东西需要学习，但希望它能帮助你避免我刚刚经历的痛苦的生产环境体验。最重要的是，如果你遵循这些初始步骤，之后你应该能够轻松地调整你的请求头，而你的用户不会察觉到任何异常；但如果你不这样做，他们就会非常清楚。
祝您编程愉快！
文章来源：https://dev.to/jamesthomson/spas-have-your-cache-and-eat-it-too-iel