javascript - 仅当网站(php、htaccess)发生变化时才设置缓存 header

Question

我正在运行 wordpress。在 .htaccess 文件中添加此代码，以便用户将看到最新版本的网站，而不是缓存的版本。

<IfModule mod_rewrite.c>
    Header set Cache-Control "no-cache, no-store, must-revalidate"
    Header set Pragma "no-cache"
    Header set Expires 0
</IfModule>

但是现在加载很慢，原因很明确。因为每次刷新时，它都会再次加载新文件。我想知道是否有任何其他方法可以检测何时更改了某些内容，然后才添加这些 header 或以其他方式清除缓存。不想使用任何插件。想通过一些 php 或 javascript 代码修复它。感谢您的帮助。

Answer 1

您可以像这样为不同的文件扩展名设置过期 header :

<IfModule mod_expires.c>
  ExpiresActive on

  # Your document html
  ExpiresByType text/html "access plus 0 seconds"

  # Media: images, video, audio
  ExpiresByType audio/ogg "access plus 1 month"
  ExpiresByType image/gif "access plus 1 month"
  ExpiresByType image/jpeg "access plus 1 month"
  ExpiresByType image/png "access plus 1 month"
  ExpiresByType video/mp4 "access plus 1 month"
  ExpiresByType video/ogg "access plus 1 month"
  ExpiresByType video/webm "access plus 1 month"

  # CSS and JavaScript
  ExpiresByType application/javascript "access plus 1 year"
  ExpiresByType text/css "access plus 1 year"
</IfModule>

对于您知道会更定期更改的特定文件，您可以添加扩展名，例如 ?=[timestamp]添加到 URL，以便浏览器将其识别为新版本。

例如，您可以更改 .js归档到main.js?version=2当您希望观众看到新版本时。

或者，您可以将扩展名更改为 main.js?ts=<?php echo date() ?>每次访问时都会重新加载文件，因为每次访问的时间戳都会不同。

---

编辑 另一种解决方案是使用文件的最后编辑时间(使用 filemtime() )作为参数追加，如下所示:

<script type='text/javascript' src='main.js?fmt=<?= filemtime("main.js") ?>'>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?ver=' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="all" />

这意味着文件数据更改后的第一次加载将强制刷新。