web前端

静态资源缓存策略

2020-04-10  本文已影响0人  姜治宇

做好的网站要放到生产环境上跑,除了做负载均衡,不可避免的要做静态资源的缓存,这样会提高页面访问速度,极大的提升用户体验。
下面看一段nginx的配置,大家找找有什么问题:

server {
    listen    80;
    server_name    www.mysite.com;
    root    /app/html/;#根路径
    location ~ .*\.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm)$
    {
        expires      7d;
    }
    location ~ .*\.(?:js|css)$
    {
        expires      7d;
    }

    location ~ .*\.(?:htm|html)$
    {    #禁止浏览器缓存,每次都从服务器请求
        add_header Cache-Control no-store;
    }
    location ^~ /mobile/
    {   #移动端网页访问mobile目录下的文件
        alias /app/html/mobile/;
    }
}

看这份配置的思路还是比较清楚的:
首先缓存了图片和css、js等静态资源;
然后对html进行单独的配置,不让其缓存;
最后对移动端的页面进行了路径配置。
但十分遗憾,当nginx跑起来后你会发现,移动端的网页会一直显示老页面,不会访问新页面!也就是说,html仍旧是可以被缓存的!
肿么回事呢?明明已经对html进行配置了啊~~

location的匹配优先级

问题出在location的匹配优先级上。location的匹配模式大概有以下几种:
1、最高等级(=):location = /abc
等号是最优先匹配的,只匹配/abc的查询。
2、第二等级(无修饰符): location /abc
没有修饰符的精确匹配,这是第二等级。
3、第三等级(^~):location ^~ /abc
这种比正则匹配的优先级要高。
4、第四等级(*或~*):location ~* /abc
这是正则匹配模式,星号代表正则匹配不区分大小写,去掉的话就是区分大小写。
大家再回顾一下之前的那份配置就会发现,^~是第三级匹配,它会优先执行,访问转到了/app/html/mobile/目录下了,然后呢?然后就没了,这事已经完成了。
这就是为什么移动端会一直访问到老页面的原因。
怎么改呢?其实很简单。
我们其实不需要单独去匹配mobile的路径了,因为前面已经配置了root,alias其实没起作用,去掉这个只保留前面的即可:

server {
    listen    80;
    server_name    www.mysite.com;
    root    /app/html/;#根路径
    location ~ .*\.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm)$
    {
        expires      7d;
    }
    location ~ .*\.(?:js|css)$
    {
        expires      7d;
    }

    location ~ .*\.(?:htm|html)$
    {    #禁止浏览器缓存,每次都从服务器请求
        add_header Cache-Control no-store;
    }
}

那么root和alias又是什么关系呢?
root就是根路径,解释成root + location匹配的路径;
而alias就是别名,解释成使用alias路径替换location匹配的路径。

上一篇下一篇

猜你喜欢

热点阅读