如何将浏览器缓存用于静态 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 的人，因此它为大多数刚入门的人负责缓存。

在您对缓存更加熟悉之后，您可能想尝试 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