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

31

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

cboettig
источник
Кажется, есть также несколько плагинов, чтобы сделать это для CSS. Это действительно необходимо? Эти плагины делают то, что не очищает кеш браузера?
cboettig
В моем случае оказалось, что мне нужно очистить кэш, созданный провайдером DNS (cloudflare). Спасибо всем за предложения ниже, хотя.
cboettig
Я использую браузер Chrome; Его окно инкогнито очень удобно, когда я сталкиваюсь с проблемами кэширования на уровне браузера во время разработки.
Джозеф Куландай
Надеюсь, этот плагин поможет вам: wordpress.org/plugins/prevent-browser-caching
Костя Терещук

Ответы:

32

Добавьте 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';

// Overridden?
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 . Он будет смотреть ваши файлы и обновлять их мгновенно, когда они меняются. Он также может синхронизировать положение прокрутки, отправку форм и многое другое в нескольких открытых браузерах. Очень круто.

Фуксия
источник
Большое спасибо. Похоже, что это также подход вышеуказанного плагина. Это не решило проблему в моем случае, потому что мой DNS-провайдер (CloudFlare) кэшировал файл css, поэтому мне пришлось очистить кеш там - думаю, простого способа не существует. В целом, я думаю, что это лучший ответ на этот вопрос, поэтому я отмечу, что он принят. Еще раз спасибо.
cboettig
Почему вы не используете свою локальную таблицу стилей во время разработки?
fuxia
Некоторые сервисы облачного кеширования жестко кэшируют ваш файл на 8+ часов, поэтому вам нужно либо попросить их внедрить более качественный сервис для управления версиями (некоторые делают это), изменить сервисы или прекратить их использование.
Wyck
@cboettig CloudFlare имеет настройку режима разработки, которая останавливает кеширование на 3 часа. Затем он автоматически возобновляет кеширование через 3 часа.
Гилберт
7

После поиска простого решения много раз я решил найти то, что работает!

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

Нам нужно сказать wp, что это новая версия 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 - надеюсь, это поможет;)

Сагив SEO
источник
Довольно мило, но, что еще лучше, просто используйте time () в 4-м параметре, который является версией. Что даст вам:wp_enqueue_style( 'maincss', get_template_directory_uri() . '/css/style.css', array(), time(), 'all' );
Дейв
Использование времени в качестве 4-го параметра может привести к тому, что Chrome сохранит эту версию. Это особенно верно, если вы кэшируете все остальное, пока вы работаете на живом сайте. Таким образом, вы отправляете «новый файл» в chrome, который он будет использовать вместо того, чтобы сохранять эту «старую» версию в течение некоторого времени (как установлено для других ресурсов).
Sagive SEO
Нет, отлично работает в Chrome, я использовал его вчера.
Дейв
это означает, что вы не установили время кэширования / истечения срока действия в htaccess или через плагин. Но, что бы у вас ни
работало
6

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

mor7ifer
источник
2
+1 - я использую панель инструментов «Веб-разработчик» для Firefox, позволяет очень быстро отключить кеш (между прочим)
Шейн
Спасибо - нужно только отключить кеш браузера? Будет ли WP superCache по-прежнему предоставлять кешированный контент? Даже мой DNS-сервис кеширует, поэтому я не уверен, нужно ли мне отключать каждый кеш (WP, браузер, DNS и т. Д.) Отдельно.
cboettig
Сорта зависит, вам придется поиграться с ним и выяснить, что вам нужно сделать для вашей конфигурации.
mor7ifer
Я с ним, просто отключи его, вот что я делаю.
Мэтт
4

Я знаю, что на этот вопрос был принят ответ, но я думаю, что этот ответ все еще слишком сложен для рассматриваемой проблемы и может фактически быть неправильным в зависимости от пользователя (без обид, хотя), поэтому я решил поделиться как я обойти кэширование, когда я делаю мой dev (не только с 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 байтов, ненужных.

Ричард Нил Илаган
источник
Спасибо за полезные советы. К сожалению, ни один из ответов здесь не является правильным в моем случае, так как мое решение требовало очистки кэша поставщика услуг сети домена, cloudflare, но многие по-прежнему были полезной информацией.
cboettig
2

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

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

define('DONOTCACHEPAGE', true);

Каждый сайт также имеет уникальный ключ для добавления к URL-адресу для загрузки свежей версии страницы, которую, я считаю, вы можете найти на вкладке «Дополнительно».

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

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

Мэтью Бойнс
источник
1

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

fxfuture
источник
Есть вариант для этого, да.
Мэтью Бойнс
1

Если вы используете Chrome (что я настоятельно рекомендую), откройте Inspector, щелкните значок настроек в правом нижнем углу и в разделе «Сеть» выберите «Отключить кэш».

moettinger
источник
0

Как сказано для wp super cache, но для общего WP кеширования в wp-config.php Change на это:

define( 'WP_CACHE', false );

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

wpcoder
источник
-1

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

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

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