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
}