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 在服務端有更新，怎麼處理這種緩存，咱們後續再討論。