WEB缓存探究第二弹——实战

Posted by Eleanor Mao on 2017-07-27

前言

WEB缓存探究第一弹中我们讲了一些WEB缓存的基础知识和策略。 第二弹我们来讲讲如何实际在项目中配置。 ## 实战 鉴于叉烧包本包是个前端,所以我们就以HTML和Node为例开始hey-we-go

HTML——在header中加入meta标签

当然根据我的测试发现这种方式好像并没有什么卵用 这段代码代表的是不需要浏览器缓存

1
2
3
4
5
<header>
<meta http-equiv="Cache-Control" content="no-cache" /> <!-- HTTP 1.1 -->
<meta http-equiv="Pragma" content="no-cache" /> <!-- 兼容HTTP1.0 -->
<meta http-equiv="Expires" content="0" /> <!-- 资源到期时间设为0 -->
</header>

Node.js——Express

鉴于Express2.x和3.x已经是deprecated,所以此处以Express4.x为例。

HTML

WEB缓存探究第一弹定制缓存策略中已经提到对于HTML最好标记为不缓存,以便及时获取最新的静态资源版本。 通常我们在Express中渲染HTML会用到以下类似的代码👇

res.renderExpress
1
2
3
4
//当访问/index时,渲染模板index到页面
router.get('index', (req, res)=>{
res.render('index');
});

在这时我们可以使用res.set(field[,value])或者它的别名res.header(field [, value])为HTML设置Header。 此时代码如下:

res.setExpress
1
2
3
4
5
6
7
router.get('index', (req, res)=>{
res.set('Cache-Control', 'no-cache;max-age:0').render('index');
/*
或者 res.header('Cache-Control', 'no-cache;max-age:0').render('index');
或者 res.set({'Cache-Control':'no-cache', 'max-age':0}).render('index');
*/
});

也可以使用中间件的方式批量为请求加上需要的头:

1
2
3
4
app.use((req, res, next) => {
res.set('Cache-Control', 'no-cache;max-age:0');
next();
})

效果如下: Express

不过细心的小伙伴应该已经发现了, Express 没错机智的Express已经为我们加上了ETag😂

让我们来复习一下第一弹的知识点,Etag资源的验证令牌,如果指纹变化请求时则会重新下载资源,否则则不会。

可能有的人就问了,那我还需要给HTML加上Cache-Control吗?

当然仅用ETag来控制资源是否缓存和更新是合理的,不过我的意见是,如果明确不缓存该资源,最好还是要加上Cache-Control

静态资源

Express发布静态资源通过的是express.static(root, [options])方法。

1
app.use(express.static(path.join(__dirname, 'public')));

它的options参数可以配置header参数 Express 静态资源我们最好是为他加上一个超长的过期时间,像这样

express.staticExpress
1
2
3
4
5
6
7
8
9
10
//作为Exprss参数的maxAge的单位是毫秒,但是在header中单位是秒!不要搞错哦
app.use(express.static(path.join(__dirname, 'public'), {
maxAge: 3153600000,
setHeaders: (res, path, stat) => {
res.set({'Expires': new Date('2100-12-12')})
}
}));
//如果需要分别为资源设置头,可以使用多个`express.static`管理
//或者在`setHeaders`函数中通过判断`path`后缀分别加上不同的头
//当然有更靠谱的方法欢迎联系我 >w<

效果如下: Express

不过不要忘记给静态资源文件名加上指纹哦

Nginx

同理,就不在重复叙述了,只写一下配置

不过同时设置expiresadd_header Cache-Control会在请求中出现复数的Cache-Control,但HTTP1.1能够识别它。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ {
etag off; #关闭etag
expires 1d; #有效期一天
# expires的单位可以使用
# ms: 毫秒
# s: 秒
# m: 分钟
# h: 小时
# d: 天
# w: 星期
# M: 月 (30 天)
# y: 年 (365 天)
}
location ~ .*\.css$ {
expires 1y; #有效期一年
add_header Cache-Control public; #cache-control设为public
}
location ~ .*\.js$ {
expires 1y; #有效期一年
add_header Cache-Control private; #cache-control设为private
}