Web优化:移除静态资源查询字符串刷新缓存的替代方案

我们通常在修改了静态资源文件(通常是CSS、JS文件)之后,为了快速刷新客户端缓存,在修改的资源文件URL后面添加修改时间戳或版本号等查询字符串来更新URL,从而促使浏览器重新请求服务器获取最新修改版本。

比如:http://jianyun.org/Assets/css/style.css?v=1.2 这种形式的URL。

如果用一些Web优化分析的工具扫描的话,比如GTMetrix网站,会给出优化的建议:

Remove query strings from static resources

Resources with a “?” in the URL are not cached by some proxy caching servers. Remove the query string and encode the parameters into the URL.

Most proxies, most notably Squid up through version 3.0, do not cache resources with a “?” in their URL even if a Cache-control: public header is present in the response. To enable proxy caching for these resources, remove query strings from references to static resources, and instead encode the parameters into the file names themselves.

主要原因是一些代理服务器(如CDN)可能不会缓存这些带参数的资源。

优化的方案有:

1)参数放进文件名。

比如:http://jianyun.org/Assets/css/style-1.2.css

2)在URL路径中加上参数。

比如:http://jianyun.org/Assets/20171003/css/style.css

我的某个项目,由于种种原因不能每次修改就改文件名,所以采用了这种方案。在添加了时间戳参数后,访问这个URL就会找不到对应的资源文件,我们可以安装IIS的官方扩展工具URL Rewrite,添加rewrite的rule,通过正则匹配来移除这个参数,重写URL。

URL Rewrite 工具下载路径:https://www.iis.net/downloads/microsoft/url-rewrite

下载和安装之后,就可以使用这个工具。可以直接在web.config中添加对应的规则,也可以通过IIS中的可视化工具来添加。

添加如下重写规则:

<system.webServer>
  <rewrite>
    <rules>
      <rule name="rewriteResource" stopProcessing="true">
        <match url="(.*Assets)(/\d+/)(.+)" />
        <action type="Rewrite" url="{R:1}/{R:3}" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

规则中通过正则表达式来匹配参数本身,参数前面和后面的URL部分,然后在重写的URL里剔除参数部分即可。

原创文章,转载请注明: 转载自闲云博客

本文链接地址: Web优化:移除静态资源查询字符串刷新缓存的替代方案

发表评论

电子邮件地址不会被公开。 必填项已用*标注