如何为 css/js 文件设置缓存

Question

我必须为我在站点中使用的 css 文件和 js 文件使用缓存。 我的网站在共享托管服务器中运行。服务器无能为力。

那么对于 js 和 css 文件使用缓存和压缩的解决方案是什么。

Answer 1

如果您使用的是 Apache，我会从这里开始。

• http://www.askapache.com/htaccess/htaccess.html
• http://www.askapache.com/htaccess/speed-up-your-site-with-caching-and-cache-control.html#caching-with-mod_expires

压缩和缓存是不同的东西。

对于压缩，PHP Minify 或 YUI Compressor 非常棒。如果一切都失败了，TextMate 有一个不错的 Javascript 工具包，可以让你压缩你的代码。您可以手动压缩您的代码，然后上传它，然后撤消压缩以使源恢复到可读状态。我不推荐这个，但我以前做过。

关于缓存，请阅读 askapache.com 站点。有几种简单的方法可以打开 mod_expires、mod_compress 和其他模块。由于您使用的是共享主机，这里有一些警告，因为主机可能已经关闭了某些 Apache 模块。我用过 GoDaddy，他们关闭了 mod_expires。有关 Apache 模块的主机特定信息，请参阅主机支持文档。

如果你幸运的话，重要的事情已经开始了，你可以：

<IfModule mod_deflate.c>
  SetOutputFilter DEFLATE
  SetEnvIfNoCase Request_URI \
  \.(?:gif|jpe?g|png)$ no-gzip dont-vary
</IfModule>

<IfModule mod_expires.c>
  ExpiresActive on
  ExpiresByType image/jpg "access 2 month"
  ExpiresByType image/gif "access 2 month"
  ExpiresByType image/jpeg "access 2 month"
  ExpiresByType image/png "access 2 month"
  ExpiresByType text/css "access 2 month"
  ExpiresByType application/x-javascript "access plus 2 month"
  ExpiresByType text/javascript "access plus 2 month"
  ExpiresByType application/javascript "access plus 2 month"
  ExpiresByType image/x-icon "access plus 12 month"
  ExpiresByType image/icon "access plus 12 month"
  ExpiresByType application/x-ico "access plus 12 month"
  ExpiresByType application/ico "access plus 12 month"
</IfModule>`

将此代码放入您的 .htaccess 文件中，打开 FireFox，然后是 Firebug，然后是 YSlow。运行 YSlow 测试，它会让你知道缓存是否工作。

Answer 2

如果您可以使用 PHP5，请使用Minify...它将压缩、混淆和缓存您的 HTML/CSS，而无需更改脚本 (JS/CSS) 源代码。

如果您无法在服务器上使用 PHP5，请使用 YUI Compressor 压缩和混淆您的文件并使用 .htaccess 缓存您的文件：

<FilesMatch "\.(css|js)$">
Header set Cache-Control "max-age=172800, public, must-revalidate"
</FilesMatch>

Answer 3

您确实需要访问服务器以管理服务器呈现给浏览器的http headers。