Каковы наилучшие методы предотвращения устаревших CSS и JavaScript

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

Я работаю с инфраструктурой Spring 2.5 MVC, и я уже использую google api для обслуживания прототипа и сценария. Я также рассматриваю возможность использования Amazon S3 и нового предложения Cloudfront для минимизации латентности сети.

Ответ 1

Я добавляю параметр к запросу с номером ревизии, например:

<script type="text/javascript" src="/path/to/script.js?ver=456"></script>

Параметр "ver" автоматически обновляется с каждой сборкой (считывается из файла, который обновляет сборку). Это гарантирует, что скрипты будут кэшироваться только для текущей версии.

Ответ 2

Подобно @eran-galperin, я использую параметр в ссылке на JS файл, но я включаю ссылку на сервер для даты последнего изменения файла. @stein-g-strindhaug предлагает такой подход. Он будет выглядеть примерно так:

<script type="text/javascript" src="/path/to/script.js?1347486578"></script>

Сервер игнорирует параметр для статического файла, и клиент может кэшировать script до изменения кода даты. Если (и только если) вы изменяете JS файл на сервере, код даты будет изменяться автоматически.

Например, в PHP мой script для создания этого кода выглядит следующим образом:

function cachePreventCode($filename) {
    if (!file_exists($filename))
        return "";
    $mtime = filemtime($filename);
    return $mtime;
}

Итак, когда ваш PHP файл содержит ссылку на файл CSS, он может выглядеть так:

<link rel="stylesheet" type="text/css" href="main.css?<?= cachePreventCode("main.css") ?>" />

... который создаст...

<link rel="stylesheet" type="text/css" href="main.css?1347489244" />

Ответ 3

Что касается кэшированных файлов, я все же сталкиваюсь с проблемами ошибок, связанных с устаревшими кешированными файлами, с помощью метода querystring.

Однако в отношении производительности и повторения Todd B упоминания об обновлении по имени файла, пожалуйста, просмотрите работу Стива Соудерса для получения дополнительной информации по теме:

"Squid, популярный прокси-сервер, не кэширует ресурсы с помощью querystring. Это ухудшает производительность, когда несколько пользователей за прокси-кешем запрашивают один и тот же файл - вместо использования кэшированной версии всем приходилось отправлять запрос на исходный сервер."

"Прокси-администраторы могут изменить конфигурацию, чтобы поддерживать кеширование ресурсов с помощью запроса, когда заголовки кеширования указывают, что это подходит. Но конфигурация по умолчанию - это то, что веб-разработчики должны чаще встречаться."

http://www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/

Ответ 4

Используйте запрос conditional get с заголовком If-Modified-Since

Ответ 5

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

Я бы рекомендовал опубликовать ваши файлы, используя временную метку и/или версию, встроенную в url, поэтому вместо:

/media/js/my.js, вы получите:

/media/js/v12/my.js или что-то подобное.

Вы можете автоматизировать управление версиями /timestamping с помощью любого инструмента.

Это имеет дополнительное преимущество: не разрывать сайт при развертывании новых версий и позволяет проводить реальное бок о бок тестирование (в отличие от правила перезаписи, которое просто лишает версию и отправляет обратно новейший файл).

Одна вещь, которая следует учитывать при использовании JS или CSS, заключается в том, что вы включаете в себя зависимые URL-адреса внутри них (фоновые изображения и т.д.), вы должны убедиться, что временная метка/версия JS/CSS изменяется, если внутренний ресурс (как и переписать их, но это возможно с очень простым регулярным выражением и манифестом ресурса).

Независимо от того, что вы делаете, убедитесь, что вы не бросили "vblah" в конце, поскольку вы в основном бросаете окно из окна, когда вы это делаете (что является неудачным, поскольку это самый простой способ справиться с этим)

Ответ 6

Если вы получите "измененное время" файла как временную метку, он будет кэшироваться до тех пор, пока файл не будет изменен. Просто используйте вспомогательную функцию (или то, что она вызывается в других фреймворках), чтобы добавить теги script/css/image, которые получают временную метку из файла. В унифицированной системе (которая больше всего подходит) вы можете просто touch файлы, чтобы принудительно изменить измененное время при необходимости.

Ruby on Rails использует эту стратегию в режиме производства (по умолчанию я beleave) и использует обычную временную метку в режиме разработки (чтобы быть уверенным, что что-то не кэшировано).

Ответ 7

Если вы используете MAVEN, вы можете использовать это, ADD на pom.xml:

<properties>
   <maven.build.timestamp.format>yyyyMMddHHmm</maven.build.timestamp.format>
   <timestamp>${maven.build.timestamp}</timestamp>
</properties>

С этим вы можете использовать ${timestamp} в своем представлении. Как этот образец:

<script type="text/javascript" src="/js/myScript.js?t=${timestamp}"></script>