Как избежать кэширования во время разработки?

Question

Как избежать кэширования во время разработки?

30 янв. 2012 г., 19:22:02

Просмотры: 70.2K

Голосов: 32

Существует ли простой способ предотвратить кэширование при тестировании изменений на сайте? Я использую WP Super Cache. Я могу удалить его кэш через предоставленную опцию, очистить кэш браузера, но некоторые изменения в CSS или виджетах все равно не обновляются. Я пробую другие обходные пути, такие как переключение браузеров или компьютеров, но должен быть более оптимизированный рабочий процесс, где я могу быть уверен, что вижу внесенные мной изменения, а не какой-то закэшированный ранее формат? Какое лучшее решение для этого?

cboettig

423

css кеш стратегия разработки

Комментарии

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

cboettig

30 янв. 2012 г. 19:53:06

В моем случае оказалось, что нужно очистить кэш, созданный DNS-провайдером (Cloudflare). Тем не менее, спасибо всем за предложенные ниже варианты.

cboettig

31 янв. 2012 г. 01:35:31

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

Joseph

8 нояб. 2013 г. 08:47:02

Надеюсь, этот плагин вам поможет: https://wordpress.org/plugins/prevent-browser-caching/

Kostya Tereshchuk

31 янв. 2018 г. 17:41:50

Все ответы на вопрос

Комментарии

Большое спасибо. Похоже, это также подход указанного плагина. В моем случае это не решило проблему, потому что мой DNS-провайдер (CloudFlare) кэшировал css-файл, поэтому мне пришлось очистить кэш там — думаю, простого обходного пути нет. В целом, однако, я считаю это лучшим ответом на подобную проблему, поэтому отмечу как принятый. Еще раз спасибо.

cboettig

31 янв. 2012 г. 01:33:54

Почему бы не использовать локальную таблицу стилей во время разработки?

fuxia

31 янв. 2012 г. 02:59:24

Некоторые облачные сервисы кэширования могут жестко кэшировать ваш файл на 8+ часов, так что вам либо придется запросить у них реализацию лучшего сервиса для версионирования (некоторые это делают), сменить сервис, либо перестать их использовать.

Wyck

31 янв. 2012 г. 18:38:29

@cboettig У CloudFlare есть режим разработчика, который отключает кеширование на 3 часа. После этого кеширование автоматически возобновляется.

Gilbert

25 авг. 2014 г. 23:13:49

После многократных поисков простого решения я наконец нашел то, что работает!

Итак... после размышлений я обнаружил отличный способ обойти кэширование при разработке новых сайтов... (и это просто).

Нам нужно указать WordPress, что это новая версия CSS, вот так...

До изменений:

wp_enqueue_style( 'maincss', get_template_directory_uri() . '/css/style.css', array(), false, 'all' );

После изменений:

wp_enqueue_style( 'maincss', get_template_directory_uri() . '/css/style.css?v='.time(), array(), false, 'all' );

Вот что мы добавили:

?v='.time()

Объяснение:
Мы добавляем динамический номер версии к CSS-файлу, что заставляет браузер загружать новый CSS каждый раз при его обновлении.

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

Эта техника работает для CSS и JS файлов - надеюсь, это поможет ;)

Sagive

2.78K

18 авг. 2014 г. 10:00:48

Комментарии

Довольно неплохо, но еще лучше просто использовать time() в качестве 4-го параметра, который отвечает за версию. Это даст вам: wp_enqueue_style( 'maincss', get_template_directory_uri() . '/css/style.css', array(), time(), 'all' );

Dave

13 сент. 2018 г. 04:41:49

Использование time() в качестве 4-го параметра может привести к тому, что Chrome будет удерживать эту версию. Особенно это актуально, если вы кэшируете все остальное во время работы на живом сайте. Таким образом, вы отправляете "новый файл" в Chrome, который он будет использовать, вместо того чтобы пытаться сохранить "старую" версию в течение определенного времени (как установлено для других ресурсов).

Sagive

13 сент. 2018 г. 12:24:37

Нет, в Chrome все работает нормально, я использовал это вчера.

Dave

14 сент. 2018 г. 06:34:42

это означает, что вы не установили время кэширования / срок действия в вашем htaccess или через плагин. Но как вам удобнее ;)

Sagive

14 сент. 2018 г. 15:26:27

Это может показаться слишком простым, но как насчёт того, чтобы просто отключить кеширование до завершения разработки вашего сайта? Включение и отключение кеширования - очень простая процедура.

mor7ifer

8.61K

30 янв. 2012 г. 19:42:16

Комментарии

+1 - Я использую панель "Web Developer" для Firefox, которая позволяет очень быстро отключать кеш (среди прочего)

Shane

30 янв. 2012 г. 19:44:56

Спасибо - нужно ли отключать только кеш браузера? Будет ли WP SuperCache по-прежнему предоставлять закешированный контент? Мой DNS-сервис тоже кеширует, поэтому я не уверен, нужно ли отключать каждый кеш (WP, браузер, DNS и т.д.) отдельно.

cboettig

30 янв. 2012 г. 19:48:18

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

mor7ifer

30 янв. 2012 г. 20:23:56

Я с ним согласен, просто отключите это, так я и делаю.

matt

31 янв. 2012 г. 01:07:32

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

Большинство современных браузеров имеют так называемый режим инкогнито. В этом режиме ничего на вашем компьютере не кэшируется, поэтому каждая перезагрузка — это свежая загрузка с сервера. В Internet Explorer это комбинация Ctrl + Shift + P. В Firefox и Chrome — Ctrl + Shift + N.

Если ваш браузер не поддерживает режим инкогнито, вы можете принудительно выполнить жесткую перезагрузку страницы с помощью Ctrl + F5 в IE или Ctrl + Shift + R в Firefox и Chrome.

Что касается вашего вопроса о CSS-файлах (и, по сути, всех ассет-файлах, таких как изображения и JavaScript), они никак не кэшируются WP Super Cache. Настройки и/или использование этого плагина не влияют на то, как эти файлы отдаются. Их кэширует ваш браузер, и именно поэтому вы делаете жесткую перезагрузку.

Что делает плагин — он анализирует, как WordPress генерирует HTML-файлы (через PHP), сохраняет копию, и при следующем запросе того же поста, страницы или чего-либо еще он отдает эту копию, не пересчитывая PHP-сгенерированный HTML заново, тем самым экономя время загрузки страниц. (Надеюсь, это понятно.)

Проблема в том, что если вы добавляете временную метку к URL ваших CSS-файлов через PHP-функцию, это является PHP-генерацией HTML, и это будет кэшировано WP Super Cache. Каждый запрос к тому же посту будет содержать одинаковую временную метку, потому что пользователям отдается копия оригинального результата генерации. (Поправьте, если я ошибаюсь.)

Правильный способ обхода кэширования WP Super Cache — установить опцию Don't cache for known users в значение true на странице настроек плагина.

Наконец (и это личное предпочтение, так как я очень щепетилен в вопросах кодинга), использование режима инкогнито или принудительной жесткой перезагрузки избавляет вас от необходимости добавлять лишнюю разметку в HTML-страницы. Конечно, добавление временной метки — это всего лишь около 13 байт на статический файл за запрос, но, как я уже сказал, я придирчив к таким вещам. Это все равно 13 лишних байт.

Richard Neil Ilagan

141

1 февр. 2012 г. 19:55:52

Комментарии

Спасибо за полезные советы. К сожалению, ни один из ответов здесь не подошел в моем случае, так как мое решение требовало очистки кеша у провайдера доменной сети, Cloudflare, но многие все равно содержали полезную информацию.

cboettig

1 февр. 2012 г. 21:50:13

Что сработало для меня при запуске WordPress на стеке Bitnami под Windows — это редактирование файла php.ini и перезапуск сервера.

В секции [opcache] измените значение opcache.revalidate_freq на 1:

opcache.revalidate_freq=1

После этого я перезапустил серверы, и теперь изменения в моих плагинах отображаются на страницах сразу.

Steve B

31

9 окт. 2020 г. 12:27:09

О, тут есть несколько способов решения! Прежде всего, вы затронули две разные вещи: WP Super Cache и CSS-файлы. Они кешируются по-разному и в разных местах, поэтому важно понять, в чём именно ваша проблема.

Если дело в WP Super Cache, вы можете определить константу DONOTCACHEPAGE в файле functions.php во время разработки, чтобы WP Super Cache ничего не кешировал. Только не забудьте убрать это перед запуском сайта!

define('DONOTCACHEPAGE', true);

Кроме того, у каждого сайта есть уникальный ключ, который можно добавить к URL, чтобы загрузить свежую версию страницы. Его можно найти во вкладке "Advanced", если я не ошибаюсь.

Если говорить о более правильном решении, стоит настроить отдельные среды для разработки и продакшена, где в среде разработки WP Super Cache будет отключён (опять же, если проблема именно в нём).

Если же проблема связана с файлами CSS/JS, то обратите внимание на ответ toscho и последующий комментарий m0r7if3r выше.

Matthew Boynes

7.12K

31 янв. 2012 г. 00:01:26

HyperCache отключает кеширование, когда вы вошли в систему как администратор. Не уверен, есть ли такая же функциональность в WP Super Cache.

fxfuture

1.34K

30 янв. 2012 г. 23:48:04

Комментарии

Для этого есть опция, да.

Matthew Boynes

30 янв. 2012 г. 23:53:08

Если вы используете Chrome (что я настоятельно рекомендую), откройте Инспектор, нажмите на значок настроек в правом нижнем углу и в разделе "Network" выберите "Disable Cache".

moettinger

402

31 янв. 2012 г. 17:37:50

Как уже говорилось для wp super cache, но для общего кеширования WordPress в файле wp-config.php Измените на следующее:

define( 'WP_CACHE', false );

Ссылка: codex.wordpress.org

wpcoder

111

4 мар. 2017 г. 03:41:47

Комментарии

Это действительно было единственным решением проблемы. Спасибо!

User

9 апр. 2020 г. 01:33:12

Вы можете использовать этот сниппет https://gist.github.com/jhayiwg/92bae4330aeb738a98022d7ab63ce9b1

Он будет генерировать новую версию CSS и JS вашей активной темы при каждой загрузке страницы

Mark

1

20 окт. 2017 г. 06:28:18

Комментарии

Пожалуйста, опубликуйте ответ здесь, включая весь соответствующий код. Используйте внешние сайты только для справки. Ваш ответ должен быть полным и не требовать перехода на другие сайты; если сторонний сайт перестанет работать, ваш ответ станет бесполезным.

cybmeta

20 окт. 2017 г. 11:22:30

fuxia 107K · Accepted Answer · 2012-01-30T19:33:31Z

Добавьте filemtime() вашей таблицы стилей в качестве параметра версии. Предположим, ваша основная таблица стилей находится в css/default.css и css/default.min.css (не style.css). Когда мы регистрируем таблицу стилей в хуке wp_loaded (не init), мы можем передать версию в качестве четвертого параметра. Это будет время последнего изменения файла, поэтому оно будет меняться каждый раз при изменении файла.

$min    = WP_DEBUG ? '': '.min';
$file   = "/css/default$min.css";
$url    = get_template_directory_uri() . $file;
$path   = get_template_directory() . $file;
$handle = get_stylesheet() . '-default';

// Переопределено в дочерней теме?
if ( is_child_theme() && is_readable( get_stylesheet_directory() . $file ) )
{
    $url  = get_stylesheet_directory_uri() . $file;
    $path = get_stylesheet_directory()     . $file;
}

$modified = filemtime( $path );

add_action( 'wp_loaded', function() use ( $handle, $url, $modified ) {
    wp_register_style( $handle, $url, [], $modified );
});

add_action( 'wp_enqueue_scripts', function() use ( $handle ) {
    wp_enqueue_style( $handle );
});

Если вы используете Node.js и Grunt, я настоятельно рекомендую Browsersync. Он будет отслеживать изменения в ваших файлах и мгновенно обновлять их при любом изменении. Также он может синхронизировать позицию прокрутки, отправку форм и многое другое между несколькими открытыми браузерами. Очень удобно.