如何利用浏览器缓存静态HTML资产？

Question

我在heroku上构建了我的静态html。这是链接：https://askheating.herokuapp.com/

现在，当我在GTMetrix上进行测试时，由于杠杆浏览器缓存，我得分非常糟糕。

这是我的.htaccess脚本

 AddType application/vnd.ms-fontobject .eot 
 AddType application/x-font-ttf .ttf
 AddType application/x-font-opentype .otf
 AddType application/x-font-woff .woff
 AddType image/svg+xml .svg

# BEGIN Expire headers
<ifModule mod_expires.c>


ExpiresActive On
  ExpiresDefault "access plus 5 seconds"
  ExpiresByType image/x-icon "access plus 2592000 seconds"
  ExpiresByType image/jpeg "access plus 2592000 seconds"
  ExpiresByType image/png "access plus 2592000 seconds"
  ExpiresByType image/gif "access plus 2592000 seconds"
  ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
  ExpiresByType text/css "access plus 604800 seconds"
  ExpiresByType text/javascript "access plus 216000 seconds"
  ExpiresByType application/javascript "access plus 216000 seconds"
  ExpiresByType application/x-javascript "access plus 216000 seconds"
  ExpiresByType text/html "access plus 600 seconds"
  ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>
# END Expire headers

# BEGIN Cache-Control Headers
<ifModule mod_headers.c>
  <filesMatch "\.(ico|jpe?g|png|gif|swf)$">
    Header set Cache-Control "public"
  </filesMatch>
  <filesMatch "\.(css)$">
    Header set Cache-Control "public"
  </filesMatch>
  <filesMatch "\.(js)$">
    Header set Cache-Control "private"
  </filesMatch>
  <filesMatch "\.(x?html?|php)$">
    Header set Cache-Control "private, must-revalidate"
  </filesMatch>
</ifModule>
# END Cache-Control Headers

# This is for gzip, which compresses files
<ifModule mod_gzip.c>
  mod_gzip_on Yes
  mod_gzip_dechunk Yes
  mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
  mod_gzip_item_include handler ^cgi-script$
  mod_gzip_item_include mime ^text/.*
  mod_gzip_item_include mime ^application/x-javascript.*
  mod_gzip_item_exclude mime ^image/.*
  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>


#Remove the Need for www in Your URL

RewriteEngine On

RewriteBase /
RewriteCond %{HTTP_HOST} ^www.askheating.herokuapp.com [NC]
RewriteRule ^(.*)$ https://askheating.herokuapp.com/$1 [L,R=301]
RewriteCond %{HTTPS} !on
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI}

# disable directory browsing

Options All -Indexes

但我仍然得到这个

现在我不知道如何玩nginx，以及在哪里找到所有的东西..请帮助!!

Answer 1

浏览器缓存.htaccess

下面的代码告诉浏览器要缓存什么以及“记住”它的时间。它应该添加到.htaccess文件的顶部。

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##

保存.htaccess文件，然后刷新您的网页。

如何为不同的文件类型设置不同的缓存时间

您可以在上面的代码中看到有时间段，如“1年”或“1个月”。这些与文件类型相关联，例如上面的代码声明.jpg文件（图像）应缓存一年。

如果你想改变它并说你希望你的jpg图像缓存一个月，你只需将“1年”替换为“1个月”。上述值针对大多数网页和博客进行了优化。

.htaccess的替代缓存方法

上面的方法称为“Expires”，它适用于大多数人使用.htaccess，因此它负责大多数刚入门的人的缓存。

在您更熟悉缓存之后，您可能需要尝试缓存控制，这是另一种缓存方法，它为我们提供了更多选择。

expires方法也可能不适用于您的服务器，在这种情况下，您可能希望尝试使用Cache-Control。

缓存控制

Cache-Control允许我们对浏览器缓存进行更多控制，许多人发现设置后更容易使用。

在.htaccess文件中使用示例：

# 1 Month for most static assets
<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>

以上代码根据文件类型设置缓存控制头。

---

https://varvy.com/pagespeed/leverage-browser-caching.html

https://medium.com/@codebyamir/a-web-developers-guide-to-browser-caching-cc41f3b73e7c