如何利用浏览器缓存获取静态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 year”替换为“ 1 month”。上面的值已针对大多数网页和博客进行了优化。

.htaccess的备用缓存方法

以上方法称为“ Expires”，它适用于大多数使用.htaccess的用户，因此它为大多数刚开始使用的人提供了缓存。

对缓存比较满意之后，您可能需要尝试Cache-Control，这是另一种缓存方法，为我们提供了更多选择。

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