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

前言

WEB缓存探究第一弹中咱们讲了一些WEB缓存的基础知识和策略。
第二弹咱们来说讲如何实际在项目中配置。

实战

鉴于叉烧包本包是个前端，因此咱们就以HTML和Node为例开始

HTML——在header中加入meta标签

固然根据个人测试发现这种方式好像并无什么卵用
这段代码表明的是不须要浏览器缓存

<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会用到如下相似的代码?

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

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

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');
    */
});

也可使用中间件的方式批量为请求加上须要的头：

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

效果以下：

不过细心的小伙伴应该已经发现了，

没错机智的Express已经为咱们加上了ETag?

让咱们来复习一下第一弹的知识点，Etag资源的验证令牌，若是指纹变化请求时则会从新下载资源，不然则不会。

可能有的人就问了，那我还须要给HTML加上Cache-Control吗？

固然仅用ETag来控制资源是否缓存和更新是合理的，不过个人意见是，若是明确不缓存该资源，最好仍是要加上Cache-Control。

静态资源

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

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

它的options参数能够配置header参数

静态资源咱们最好是为他加上一个超长的过时时间，像这样

//做为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<

效果以下：

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

Nginx

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

不过同时设置expires和add_header Cache-Control会在请求中出现复数的Cache-Control，但HTTP1.1可以识别它。

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
}