Объединение CSS с контролем кэша

Question

Хорошо, вот сложный вопрос:

У меня есть этот веб-сайт с несколькими файлами CSS, который использует очистку кэша, и он работал нормально.я получал 403 не изменено с каждым вызовом.

Но теперь я использую это правило в своем htaccess для объединения всех моих файлов

<FilesMatch "\.combined\.css$">
  Options +Includes
  AddOutputFilterByType INCLUDES text/css
  SetOutputFilter INCLUDES
</FilesMatch>

Внутри script.combined.css вы можете найти это:

<!--#include file="file1.css" -->
<!--#include file="file2.css" -->

Проблема в том, что, хотя мой файл "script.combined.css" использует очистку кэша.он всегда возвращает "200 Ok".Это заголовки script.combined.css:

Request

URL:http://XXX/css/script.combined.css
Request Method:GET
Status Code:200 OK

Request Headers

Accept:text/css,*/*;q=0.1
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Cache-Control:max-age=0
Connection:keep-alive
Cookie:typo3-login-cookiecheck=true; PHPSESSID=2evc53ngjjobateti38gpahtt7; tx_phpmyadmin=quf4sgevagubd1snd9eoq4g4d0; be_typo_user=0f4c7e291b6d7673310d6f15da687910; Typo3InstallTool=62erpih8fmqbbl3pe75pcenuu0; fe_typo_user=a7e5de71521603161fa598ed523b024b
Host:XXX
Referer:http://XXX/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/534.30 (KHTML, like Gecko) Ubuntu/11.04 Chromium/12.0.742.112 Chrome/12.0.742.112 Safari/534.30

Response Headers

Accept-Ranges:bytes
Cache-Control:max-age=31536000, public
Connection:Keep-Alive
Content-Type:text/css
Date:Wed, 17 Aug 2011 13:56:42 GMT
Expires:Thu, 16 Aug 2012 13:56:42 GMT
Keep-Alive:timeout=5, max=99
Server:HTTPD
Transfer-Encoding:chunked

... в то время как это заголовки для другого простого файла CSS:

Request URL:http://XXX/css/style.css
Request Method:GET
Status Code:304 Not Modified

Request Headers

Accept:text/css,*/*;q=0.1
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Cache-Control:max-age=0
Connection:keep-alive
Cookie:typo3-login-cookiecheck=true; PHPSESSID=2evc53ngjjobateti38gpahtt7; tx_phpmyadmin=quf4sgevagubd1snd9eoq4g4d0; be_typo_user=0f4c7e291b6d7673310d6f15da687910; Typo3InstallTool=62erpih8fmqbbl3pe75pcenuu0; fe_typo_user=a7e5de71521603161fa598ed523b024b
Host:XXX
If-Modified-Since:Wed, 17 Aug 2011 11:45:17 GMT
Referer:http://XXX/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/534.30 (KHTML, like Gecko) Ubuntu/11.04 Chromium/12.0.742.112 Chrome/12.0.742.112 Safari/534.30

Response Headers

Cache-Control:max-age=31536000, public
Connection:Keep-Alive
Date:Wed, 17 Aug 2011 13:56:42 GMT
Expires:Thu, 16 Aug 2012 13:56:42 GMT
Keep-Alive:timeout=5, max=97
Server:HTTPD

Я использовал расширение для измерения страницыСкорость от Google, и я получил это сообщение:

Укажите валидатор кэша

В следующих ресурсах отсутствует валидатор кэша.Ресурсы, в которых не указан валидатор кэша, не могут быть эффективно обновлены.Укажите заголовок Last-Modified или ETag, чтобы включить проверку кэша для следующих ресурсов:

http://XXX/css/script.combined.css?1313583214

Что мне делать ??

Answer 1

В соответствии с документацией Apache для серверной части:

В конфигурации по умолчанию Apache не отправляет заголовки HTTP последней измененной даты или длины содержимого на страницах SSI, поскольку эти значения сложно вычислитьдля динамического содержимого.

http://httpd.apache.org/docs/1.3/howto/ssi.html

Таким образом, прямой запрос в вашем браузере на styles.combined.css никогда не вернет статус 304 Not Modified.

Но есливы устанавливаете expires headers , браузер просто извлекает ресурс из локального кэша.Запрос на проверку даты последнего изменения не требуется и не отправляется.

Answer 2

Я предлагаю вам взглянуть на прекрасную работу проекта html5 шаблон , который дает вам хорошую основу для начала в новых проектах. Но что еще более важно, он включает в себя файл .htaccess с хорошо закомментированными правилами.

Вам может пригодиться следующий фрагмент:

# ----------------------------------------------------------------------
# Expires headers (for better cache control)
# ----------------------------------------------------------------------

# These are pretty far-future expires headers.
# They assume you control versioning with cachebusting query params like
#   <script src="application.js?20100608">
# Additionally, consider that outdated proxies may miscache 
#   www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/

# If you don't use filenames to version, lower the CSS  and JS to something like
#   "access plus 1 week" or so.

<IfModule mod_expires.c>
  ExpiresActive on

# Perhaps better to whitelist expires rules? Perhaps.
  ExpiresDefault                          "access plus 1 month"

# cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
  ExpiresByType text/cache-manifest       "access plus 0 seconds"

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

# Data
  ExpiresByType text/xml                  "access plus 0 seconds"
  ExpiresByType application/xml           "access plus 0 seconds"
  ExpiresByType application/json          "access plus 0 seconds"

# Feed
  ExpiresByType application/rss+xml       "access plus 1 hour"
  ExpiresByType application/atom+xml      "access plus 1 hour"

# Favicon (cannot be renamed)
  ExpiresByType image/x-icon              "access plus 1 week" 

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

# HTC files  (css3pie)
  ExpiresByType text/x-component          "access plus 1 month"

# Webfonts
  ExpiresByType font/truetype             "access plus 1 month"
  ExpiresByType font/opentype             "access plus 1 month"
  ExpiresByType application/x-font-woff   "access plus 1 month"
  ExpiresByType image/svg+xml             "access plus 1 month"
  ExpiresByType application/vnd.ms-fontobject "access plus 1 month"

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

  <IfModule mod_headers.c>
    Header append Cache-Control "public"
  </IfModule>

</IfModule>



# ----------------------------------------------------------------------
# ETag removal
# ----------------------------------------------------------------------

# FileETag None is not enough for every server.
<IfModule mod_headers.c>
  Header unset ETag
</IfModule>

# Since we're sending far-future expires, we don't need ETags for
# static content.
#   developer.yahoo.com/performance/rules.html#etags
FileETag None