资讯专栏INFORMATION COLUMN

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

jcc / 1486人阅读

摘要:前言缓存探究第一弹中我们讲了一些缓存的基础知识和策略。第二弹我们来讲讲如何实际在项目中配置。在缓存探究第一弹定制缓存策略中已经提到对于最好标记为不缓存,以便及时获取最新的静态资源版本。

前言

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

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

不过同时设置expiresadd_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
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/51041.html

相关文章

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

    摘要:前言缓存探究第一弹中我们讲了一些缓存的基础知识和策略。第二弹我们来讲讲如何实际在项目中配置。在缓存探究第一弹定制缓存策略中已经提到对于最好标记为不缓存,以便及时获取最新的静态资源版本。 前言 WEB缓存探究第一弹中我们讲了一些WEB缓存的基础知识和策略。第二弹我们来讲讲如何实际在项目中配置。 实战 鉴于叉烧包本包是个前端,所以我们就以HTML和Node为例开始showImg(https...

    linkin 评论0 收藏0
  • WEB缓存探究二弹——实战

    摘要:前言缓存探究第一弹中我们讲了一些缓存的基础知识和策略。第二弹我们来讲讲如何实际在项目中配置。在缓存探究第一弹定制缓存策略中已经提到对于最好标记为不缓存,以便及时获取最新的静态资源版本。 前言 WEB缓存探究第一弹中我们讲了一些WEB缓存的基础知识和策略。第二弹我们来讲讲如何实际在项目中配置。 实战 鉴于叉烧包本包是个前端,所以我们就以HTML和Node为例开始showImg(https...

    孙淑建 评论0 收藏0
  • WEB缓存探究二弹——实战

    摘要:前言缓存探究第一弹中我们讲了一些缓存的基础知识和策略。第二弹我们来讲讲如何实际在项目中配置。在缓存探究第一弹定制缓存策略中已经提到对于最好标记为不缓存,以便及时获取最新的静态资源版本。 前言 WEB缓存探究第一弹中我们讲了一些WEB缓存的基础知识和策略。第二弹我们来讲讲如何实际在项目中配置。 实战 鉴于叉烧包本包是个前端,所以我们就以HTML和Node为例开始showImg(https...

    waltr 评论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 评论0 收藏0
  • weex踩坑之旅二弹 ~ 在weex中集成vue-router

    摘要:也就是说在中,我们的代码是要在环境中运行。而在中,是没有等以及的,即所有的框架都是不可以使用的。比如相关组件,相关组件,等都不能在中引用。是可以在中使用的。 接着第一弹讲,我们已经搭建好一个属于自己的weex项目了,然后如何开发呢?由于之前项目中都是采用vue全家桶进行开发,路由使用vue-router插件,状态管理使用vuex,Ajax前后台交互使用axios,图标库使用font-a...

    tyheist 评论0 收藏0

发表评论

0条评论

jcc

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<