Итак, значит, есть у нас сервер с nginx и на нём сайтик. На сайте, кроме страничек есть статические файлики: картиночки, скриптики и цээсэсочки. Лежат они в своих папочках — /i/, /js/, /css/. Указываем браузеру, чтобы он их кэшировал получше и лишний раз к нам не обращался:
location ~^/(i|js|css)/ { expires 30d; } |
Но наши файлики могут периодически меняться. Чтобы клиент имел всегда свежую версию файла, используем GET-параметр с указанием «ревизии». В простейшем случае, это просто некий хэш от времени изменения файла. То есть, так указываем:
<script src="/js/my-super-script.js?ae12f"></script> |
Изменится файл — вместо «ae12f» другое подставится.
Всё отлично, но нашу идиллию разрушают упорные слухи о том, что, даже в наш просвещённый век, существуют прокси и клиенты, которые до сих пор считаю всё, где есть GET-параметры, динамическим содержимым. И не кэшируют это вообще.
Но извращенцы всегда найдут выход. Пишем в nginx’е:
rewrite ^/(i|css|js)/[0-9a-f]+/(.*)$ /$1/$2 last; |
А в ссылках теперь вместо /js/my-super-script.js?ae12f
указываем /js/ae12f/my-super-script.js
. Глупые прокси думают, что это просто статический файл в каталоге с идиотским именем. А наш nginx просто выкидывает этот каталог из пути.
Кто поделится менее дурацкими решениями по этому поводу?
https://github.com/kriswallsmith/assetic
Кос, 20.01.2013, 19:56
Кос, на первый взгляд, что я увидел, это всё прячется за словами из поста «Чтобы клиент имел всегда свежую версию файла, используем GET-параметр с указанием «ревизии»». А что там насчёт кэша браузера есть?
vasa_c, 20.01.2013, 22:27
Ну он есть. Но там все намного интересней — можно объединять файлы, прогонять через фильтры, выгружать на cdn. Глянь презентацию http://www.slideshare.net/kriswallsmith/assetic-symfony-live-paris
Кос, 20.01.2013, 22:37
А спрайты в CSS внедрять?
vasa_c, 20.01.2013, 22:48
т.е. что б он автоматом собирал картинки из паки, генерил бы спрайт-картинку и потом css-ник для него? Такого нет
Кос, 20.01.2013, 22:53
Нет, чтобы обрабатывал вещи вроде background: url(/i/bg.jpg) и вставлял картинки напрямую в CSS через data-base64
vasa_c, 21.01.2013, 13:02
Да, но с применением внешней тулзы на яве. Вот полный список фильтров https://github.com/kriswallsmith/assetic/tree/master/src/Assetic/Filter
Кос, 21.01.2013, 13:44
Не, пизжу, можно и без тулзы на яве, на чистом пыхе.
Кос, 21.01.2013, 13:46
Можешь посмотреть реализацию django_compressor (https://github.com/jezdez/django_compressor). Я им сейчас пользуюсь. Умеет минимизировать, группировать файлы в один и версионировать.
Генерирует примерно такое:
Из примерно такого:
{% compress js %}
$(document).ready(function(){
$.jGrowl.defaults.pool = 5;
$.jGrowl.defaults.sticky = false;
$.jGrowl.defaults.life = 3000;
$.jGrowl.defaults.header = ‘#jGrowl {top: 10px} .jGrowl-notification {border: solid 1px white}’;
});
{% endcompress %}
adw0rd, 20.02.2013, 23:53
Вообщем теги вордпресс поел, восстанови их :-)
adw0rd, 20.02.2013, 23:53
видимо работать с data uri (data-base64) он умеет
adw0rd, 20.02.2013, 23:56
>Вообщем теги вордпресс поел, восстанови их :-)
Нету тегов, убились.
vasa_c, 21.02.2013, 11:30
Окей, тогда просто на словах, в «{% compress js %}» было порядка 8 инклудов js и один блок с inline-js (который остался частично).
А в результате, он все это объединил в один и минимизировал, ссылка в итоге получилась такая: «/static/CACHE/js/016aac4809e2.js».
adw0rd, 21.02.2013, 11:57
Короче тоже самое, что и ассетик
Кос, 21.02.2013, 12:11
Ага, по возможностям схожи
adw0rd, 21.02.2013, 13:18
adw0rd, ну а как с кэшем браузеров там дела обстоят?
“/static/CACHE/js/016aac4809e2.js — здесь каждый раз после изменений будет новое имя файла?
vasa_c, 21.02.2013, 13:30
Да, если содержимое вложенных файлов изменились, то будет изменено имя кешированного js
Вот еще глянь примеры http://django_compressor.readthedocs.org/en/latest/usage/ и тут http://django_compressor.readthedocs.org/en/latest/settings/
adw0rd, 21.02.2013, 13:46