http缓存策略-nginx只缓存js和css不缓存html

时间 2019-12-10

标签 http 缓存策略 nginx css html 栏目 HTTP/TCP 繁體版

原文原文链接

使用缓存，是提高web性能最重要的方式之一。javascript

在开发单页面应用的时候，大量的单静态资源引用都是依赖于html这个文件的。例如：css

<!doctype html>
<html lang="en">
<head><link href="/static/css/main.dfe5fa49.css" rel="stylesheet"></head>
<body>
<script type="text/javascript" src="/static/js/main.c34d94a7.js"></script>
</body>
</html>

html,css,js文件能够缓存均可以缓存。设想以下场景：html

该页面内嵌入到app（或者微信）打开，静态文件缓存到app里面了。第一次访问，打开没问题，为了提高第二次访问的性能。咱们应该设置缓存。缓存超时时间为1d（随便举例）。java

即一天内咱们随便访问这个页面都是会从缓存中取资源。nginx

问题来了：假如咱们恰好在一天内，服务端静态静态资源有更新，怎么办？web

css，js文件有hash值，可是html文件没有，html若是不更新，那么咱们在指定时间内永远无法取到更新后的js和css值。缓存

因此，咱们的缓存策略是：不缓存html，只缓存js 和 css。服务器

基于nginx静态文件服务器设置以下：微信

location /hhhh/ {
                  root   /home;
                 #index  index.html index.htm
                  try_files $uri /h5/index.html;
                  if ($request_filename ~* .*\.(?:htm|html)$)
                  {
                    add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
                  }
                 if ($request_filename ~* .*\.(?:js|css)$)
                 {
                   expires      7d;
                 }
                if ($request_filename ~* .*\.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm)$)
                {
                  expires      7d;
                }
              }

至于其余的缓存策略，能够基于此再完善。app

至于引用一个固定名称的，没有hash值的css或js，好比 abc.css 在服务端有更新，怎么处理这种缓存，咱们后续再讨论。