WEB緩存探究第二彈——實戰

孫淑建發布于2019-07-25 13:59 / 1822人閱讀

摘要：前言緩存探究第一彈中我們講了一些緩存的基礎知識和策略。第二彈我們來講講如何實際在項目中配置。在緩存探究第一彈定制緩存策略中已經提到對于最好標記為不緩存，以便及時獲取最新的靜態資源版本。

前言

WEB緩存探究第一彈中我們講了一些WEB緩存的基礎知識和策略。
第二彈我們來講講如何實際在項目中配置。

實戰

鑒于叉燒包本包是個前端，所以我們就以HTML和Node為例開始

HTML——在header中加入meta標簽

當然根據我的測試發現這種方式好像并沒有什么卵用
這段代碼代表的是不需要瀏覽器緩存

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
}

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/39617.html

WEB緩存探究第二彈——實戰

摘要：前言緩存探究第一彈中我們講了一些緩存的基礎知識和策略。第二彈我們來講講如何實際在項目中配置。在緩存探究第一彈定制緩存策略中已經提到對于最好標記為不緩存，以便及時獲取最新的靜態資源版本。前言 WEB緩存探究第一彈中我們講了一些WEB緩存的基礎知識和策略。第二彈我們來講講如何實際在項目中配置。實戰鑒于叉燒包本包是個前端，所以我們就以HTML和Node為例開始showImg(https...

linkin 2019-08-06 13:24 評論0 收藏0
WEB緩存探究第二彈——實戰

摘要：前言緩存探究第一彈中我們講了一些緩存的基礎知識和策略。第二彈我們來講講如何實際在項目中配置。在緩存探究第一彈定制緩存策略中已經提到對于最好標記為不緩存，以便及時獲取最新的靜態資源版本。前言 WEB緩存探究第一彈中我們講了一些WEB緩存的基礎知識和策略。第二彈我們來講講如何實際在項目中配置。實戰鑒于叉燒包本包是個前端，所以我們就以HTML和Node為例開始showImg(https...

waltr 2019-08-20 18:20 評論0 收藏0
WEB緩存探究第二彈——實戰

摘要：前言緩存探究第一彈中我們講了一些緩存的基礎知識和策略。第二彈我們來講講如何實際在項目中配置。在緩存探究第一彈定制緩存策略中已經提到對于最好標記為不緩存，以便及時獲取最新的靜態資源版本。前言 WEB緩存探究第一彈中我們講了一些WEB緩存的基礎知識和策略。第二彈我們來講講如何實際在項目中配置。實戰鑒于叉燒包本包是個前端，所以我們就以HTML和Node為例開始showImg(https...

jcc 2019-08-01 17:14 評論0 收藏0
2017-07-28 前端日報

2017-07-28 前端日報精選 React的新引擎—React Fiber是什么？Chromeless 讓 Chrome 自動化變得簡單【譯】JavaScript屬性名稱中的隱藏信息前端測試框架 JestES6中的JavaScript工廠函數Why Composition is Harder with ClassesGET READY: A NEW V8 IS COMING, NODE.JS...

golden_hamster 2019-08-20 18:22 評論0 收藏0
weex踩坑之旅第二彈 ~ 在weex中集成vue-router

摘要：也就是說在中，我們的代碼是要在環境中運行。而在中，是沒有等以及的，即所有的框架都是不可以使用的。比如相關組件，相關組件，等都不能在中引用。是可以在中使用的。接著第一彈講，我們已經搭建好一個屬于自己的weex項目了，然后如何開發呢？由于之前項目中都是采用vue全家桶進行開發，路由使用vue-router插件，狀態管理使用vuex，Ajax前后臺交互使用axios，圖標庫使用font-a...

tyheist 2019-08-21 18:25 評論0 收藏0