【前端优化】静态链接版本化

  作者:zhanhailiang 日期:2012-12-15

我们知道在服务器端不做任何设置的情况下，浏览器默认会自动对静态资源进行缓存。但是每个版本的一些静态资源或多或少都会有所不同。避免浏览器缓存的方法是更新链接(版本发布时给静态资源链接添加版本号)，这样浏览器识别为新的链接，就会去GET资源了。

第一种方案是考虑每个模板文件的静态链接后添加类似?v=$version的变量来替换。但是这种方案纯体力活，而且发布版本时还需要手动修改版本号。(这一蠢方案直接扑街)

第二种方案是修改Nginx配置，添加ETag。这种方案我提出来的时候就直接说了它的缺点——对性能有损耗。实践时还发现另外一个问题——不同机器产生的Etag值也不同，这导致如果同一用户负载到不同的服务器时有可能需要重新加载样式表和脚本。(这种方案又扑街)

今天尝试了最新的方法——在版本构建时用sed批量添加版本号。(Perfect)

如：

<link rel=“stylesheet” type=“text/css” href=”<!–{BASEDIR_STATIC}–>css/public.css” />

添加版本号(以发布时间作为版本号)后为

<link rel=“stylesheet” type=“text/css” href=”<!–{BASEDIR_STATIC}–>css/public.css?v=1355106937” />

脚本如下：

#!/bin/sh

version=`date +%s`
find . -name "*.html"|xargs -n 1 sed -i -e "/^\s*<script/ { s/src=\"\(.*\.js\)\(?.*\)*\"/src=\"\1?v=$version\"/g; }; /^\s*<link/ { s/href=\"\ (.*\.css\)\(?.*\)*\"/href=\"\1?v=$version\"/g; }"

最终优化版（非贪婪版本）

#!/bin/sh

version=`date +%s`
find . -name "*.html"|xargs -n 1 sed -i -e "/^\s*<script/ { s/src=\"\(.*\.js\)\(?.*\)*\?\"/src=\"\1?v=$version\"/g; }; /^\s*<link/ { s/href=\ "\(.*\.css\)\(?.*\)*\?\"/href=\"\1?v=$version\"/g; }"