AngularJS动态网站的缓存最佳实践？

Question

我正在开发一个AngularJS项目，它将具有相当大的流量。

在开发过程中，我遇到了部分缓存并未在不同操作中更新的问题。当然，我可以使用 .run 和 $templateCache.removeAll(); 来解决此问题，但我想确保这是否是一个好主意。

有些部分是动态更新的（用户输入或定期自动更新），而有些部分是静态或极少更新的。

在这种情况下，最佳缓存方法是什么？

对于非Angular网站，我更喜欢保持责任分割干净，例如： 1. 缓存标头在应用程序级别设置 2. nginx - 仅提供网站本身 3. Varnish执行FPC + CDN以用于静态资产或CDN进行全页面缓存（取决于客户/项目等）。等等等等等。 关键点：每个部分都有其自己独特的职责。

对于这个项目，我可以使用Varnish和CDN用于静态资产，多服务器设置。还可以重复使用Varnish进行负载平衡，即我可以在多个Web节点上安装Varnish。基础设施方面我有一些灵活性。

请分享您对最佳设置的想法？ 特别是：是否仍然值得缓存部分？ 如果是，最佳设置CC标头的位置在哪里？ 如果我只需要刷新某些子选择，最佳的清除缓存方法是什么？

谢谢！！ D.

- oharlem

---

我会使用类似于 https://www.npmjs.com/package/gulp-angular-templatecache 的工具将您所有的 HTML 模板合并到一个 JS 文件中，然后再使用类似于 https://github.com/sindresorhus/gulp-rev 的工具进行缓存破坏。 - rob

Answer 1

我自己回答一下，因为无法选择rob的回复作为答案。我的解决方案基于他的建议，这帮助我很多：

在生产构建期间：

1. 我使用“gulp-rev-easy” gulp模块对先前连接和压缩的CSS和JS文件进行版本控制。
2. 然而，没有现有的版本控制模块能够为我提供所需的功能：将特定字符串替换为我的CDN路径，用于CSS和JS脚本的index.html模板文件。因此，我不得不添加自己的函数/覆盖reveasy。
3. 根据rob的建议，我开始使用templatecache，并且与版本控制一起使用效果很好。
4. 图像只是通过S3 -> CDN对传输。

一些快速笔记：

1. 使用revving来“打破”缓存，证明是处理缓存最快、最简单的方法，因为CloudFront需要大约20分钟来使路径失效，其他CDN则需要更少的时间，但仍然需要发出请求等。
2. 对于动态更新的具有相同名称的图像，例如用户可以通过其个人资料区域更新的头像图像，建议在文件名中添加时间戳或一些随机字符串。虽然添加随机URL路径听起来更容易，但您将无法缓存此内容。

希望这可以帮到您， Dennis

- oharlem