版本控制和缓存静态文件:CSS、JS、图像——需要考虑的内容



对于(企业)web项目,我希望保留以前版本的静态文件,以便项目可以自己决定何时准备好实施设计更改。我最初的计划是为静态内容提供文件夹,比如:

company.com/static/1.0.0/
company.com/static/1.0.0/css/
company.com/static/1.0.0/js/
company.com/static/1.0.0/images/
company.com/static/2.0.0/
company.com/static/2.0.0/css/
company.com/static/2.0.0/js/
company.com/static/2.0.0/images/

然后,这些文件夹中的每个文件都应该有一个"永远"缓存的缓存策略——至少一年。我还计划将css文件和js文件连接为一个文件,以最大限度地减少请求数量。

然后我还将提供一个current文件夹(符号链接到最新发布的版本)

company.com/static/current/
company.com/static/current/css/
company.com/static/current/js/
company.com/static/current/images/

这将解决我的第一个问题(项目和子网站可以将其代码锁定到某个版本,并可以随时升级)。

但我可以看到一些缓存问题。现在我不能"只"缓存current文件夹,因为它会随着每个版本而变化。我的缓存策略应该在那个文件夹上。

此外,对于每个版本,大多数静态文件无论如何都不会更改。永久缓存它们并在发生更改时重命名是否相关?

我在这里寻求建议,因为我想知道缓存和更改文件之间的最佳权衡。

小心HTTP缓存。我不久前对此进行了调查。我关于HTTP缓存的博客文章

有三种方法可供选择:

  1. 使用资源的路径作为缓存密钥,即当它发生更改时,浏览器将不得不下载新版本的资源。在这种情况下,您根本不需要/current文件夹,只需要避免.html页面缓存,并在其中放置适当的资源路径
  2. 您可以将浏览器仅指向/current文件夹,并将ETag添加到您的资源中,在这种情况下,将从客户端发出另一个服务器请求,但它将是有条件的请求(即带有If-None-Match标头),因此您可以返回304响应(没有资源体),直到您的客户决定迁移到另一个版本。这种解决方案的另一个缺点(如果您有几个客户使用不同的版本)是/current文件夹将只包含某个单一版本的设计
  3. 当您要将资源连接到单个文件中时,可以将资源版本指定为url:/current/js/combined.js?version=1.0.0.0的一部分,但这与第一种方法没有太大区别

希望这能有所帮助。

看看谷歌、微软等公司如何为其jQuery CDN 实现缓存策略可能值得一看

对于版本化的URL,您的永久缓存策略是可以的。

对于当前的URL,您显然需要更短的到期时间。

需要考虑的几件事:

  • 应用程序将如何针对/current/进行测试,即如果他们使用它,你怎么知道更改不会破坏现有应用程序?

  • 永久缓存实际上只是减少"当前会话"期间的请求,因为大多数浏览器缓存不够大,无法长时间保存文件(当人们浏览其他网站时,它们会被删除)

最新更新