前言第一轮WEB缓存探索，我们讲了一些WEB缓存的基础知识和策略。在二弹中，我们来谈谈如何在项目中实际配置它。实战鉴于叉烧包是一个前端包，下面以HTML和Node为例开始HTML——在header中添加meta标签。当然，根据我的测试，这个方法好像没什么卵用。这个代码代表什么？需要浏览器缓存Node.js——Express由于Express2.x和3.x已经废弃，所以这里以Express4.x为例。HTML在WEB缓存探索的第一个自定义缓存策略中已经提到，最好将HTML标记为不缓存，以便及时获取最新的静态资源版本。通常我们在Express中渲染HTML时使用如下类似代码？//访问/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资源的验证token。如果指纹发生变化，则重新下载资源，否则不下载。可能有人会问，我还需要在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':newDate('2100-12-12')})}}));//如果需要为资源单独设置headers，可以使用多个`express.static`管理//或者在`setHeaders`函数中通过判断`path`后缀，加上不同的header//当然还有更靠谱的方法，请联系我>w<效果如下：但是不要忘记给静态资源文件名加上指纹。Nginx也是一样，就不重复描述了，写配置就可以了但是同时设置expires和add_headerCache-Control会导致请求中有多个Cache-Control，但是HTTP1.1可以识别。位置~.*\.(gif|jpg|jpeg|png|bmp|swf)${etagoff;#关闭etag过期1d；#有效期为一天#expires的单位可以用#ms:毫秒#s:秒#m:分#h:小时#d:天#w:周#m:月(30天)#y:年(365天）}location~.*\.css${过期1年；#有效期一年add_headerCache-Controlpublic;#cache-control设置为public}location~.*\.js${expires1y;#有效期一年add_headerCache-Controlprivate;#cache-control设置为私有}
