¿Cómo evitar el almacenamiento en caché durante el desarrollo?

Question

¿Cómo evitar el almacenamiento en caché durante el desarrollo?

30 ene 2012, 19:22:02

Vistas: 70.2K

Votos: 32

¿Existe una manera simple de prevenir todo el almacenamiento en caché cuando se prueban los cambios en la apariencia del sitio? Uso WP Super Cache. Puedo eliminar su caché usando la opción proporcionada, borrar la caché de mi navegador, y aun así algunos cambios en CSS o widgets no se actualizan. Intento otras alternativas como cambiar de navegadores o computadoras, pero debe haber un flujo de trabajo más eficiente donde pueda asegurarme de que estoy viendo los cambios que hice y no algún formato anterior almacenado en caché. ¿Cuál es la mejor solución para esto?

cboettig

423

css caché estrategia desarrollo

Comentarios

Parece que también hay varios plugins solo para hacer esto con CSS. ¿Es realmente necesario? ¿Esos plugins hacen algo que limpiar la caché del navegador no hace?

cboettig

30 ene 2012 19:53:06

En mi caso resultó que tenía que limpiar la caché creada por el proveedor de DNS (cloudflare). Aunque agradezco todas las sugerencias a continuación.

cboettig

31 ene 2012 01:35:31

Utilizo el navegador Chrome; su ventana de incógnito resulta útil cuando me encuentro con problemas de caché a nivel del navegador durante el desarrollo.

Joseph

8 nov 2013 08:47:02

Espero que este plugin te ayude: https://wordpress.org/plugins/prevent-browser-caching/

Kostya Tereshchuk

31 ene 2018 17:41:50

Todas las respuestas a la pregunta

Comentarios

Muchas gracias. Parece que este también es el enfoque del plugin mencionado anteriormente. No resolvió el problema en mi caso porque mi proveedor de DNS (CloudFlare) estaba almacenando en caché el archivo css, así que tuve que borrar la caché allí — supongo que no hay una forma sencilla de evitarlo. En general, creo que esta es la mejor respuesta para este tipo de problema, así que marcaré como aceptada. Gracias de nuevo.

cboettig

31 ene 2012 01:33:54

¿Por qué no usas tu hoja de estilos local durante el desarrollo?

fuxia

31 ene 2012 02:59:24

Algunos servicios de caché en la nube almacenarán tu archivo durante 8+ horas, así que tienes que pedirles que implementen un mejor servicio para el control de versiones (algunos lo hacen), cambiar de servicio o dejar de usarlos.

Wyck

31 ene 2012 18:38:29

@cboettig CloudFlare tiene un ajuste de modo desarrollo que detiene el almacenamiento en caché durante un período de 3 horas. Después de ese tiempo, reanuda automáticamente el almacenamiento en caché.

Gilbert

25 ago 2014 23:13:49

Después de buscar muchas veces una solución simple, ¡decidí encontrar algo que funcione!

Así que... después de pensarlo, encontré una gran manera de anular el caché mientras desarrollo nuevos sitios web... (y es fácil).

Lo que necesitamos es decirle a WordPress que esta es una nueva versión del CSS, así...

Antes de los cambios:

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

Después de los cambios:

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

Esto es lo que añadimos:

?v='.time()

Explicación:
Básicamente, estamos añadiendo un número de versión dinámico al archivo CSS, lo que obliga al navegador a cargar el nuevo CSS cada vez que lo actualizamos.

No olvides eliminarlo después de que hayas terminado de desarrollar; de lo contrario, tu caché no funcionará para este archivo y se cargará una y otra vez para los usuarios que regresan.

Esta técnica funciona para archivos CSS y JS - espero que esto ayude ;)

Sagive

2.78K

18 ago 2014 10:00:48

Comentarios

Bastante bueno, pero aún mejor, simplemente usa time() en el cuarto parámetro que es la versión. Lo que te daría: wp_enqueue_style( 'maincss', get_template_directory_uri() . '/css/style.css', array(), time(), 'all' );

Dave

13 sept 2018 04:41:49

Usar time como el cuarto parámetro podría hacer que Chrome se aferre a esa versión. Esto es especialmente cierto si estás cacheando todo lo demás mientras trabajas en un sitio en vivo. De esta manera estás enviando un "archivo nuevo" a Chrome que usaría en lugar de intentar mantener esa versión "antigua" por un período de tiempo (como está configurado para otros recursos).

Sagive

13 sept 2018 12:24:37

No, funciona bien en Chrome, lo estaba usando ayer.

Dave

14 sept 2018 06:34:42

eso significa que no has configurado el tiempo de caché/expiración en tu htaccess o mediante un plugin. Pero, lo que funcione para ti ;)

Sagive

14 sept 2018 15:26:27

Esto puede parecer demasiado simple, pero ¿qué tal si simplemente desactivas el almacenamiento en caché hasta que termines con la parte de desarrollo de tu sitio? Es muy sencillo activarlo y desactivarlo.

mor7ifer

8.61K

30 ene 2012 19:42:16

Comentarios

+1 - Yo uso la barra de herramientas "Web Developer" para Firefox, te permite deshabilitar rápidamente la caché (entre otras cosas)

Shane

30 ene 2012 19:44:56

Gracias - ¿es solo necesario deshabilitar la caché del navegador? ¿WP superCache seguirá proporcionando contenido en caché? Incluso mi servicio DNS almacena en caché, así que no estoy seguro si necesito deshabilitar cada caché (WP, navegador, DNS, etc.) por separado.

cboettig

30 ene 2012 19:48:18

Depende un poco, tendrás que experimentar con ello y descubrir qué necesitas hacer para tu configuración.

mor7ifer

30 ene 2012 20:23:56

Estoy con él, simplemente desactívalo, eso es lo que hago.

matt

31 ene 2012 01:07:32

Sé que esta pregunta ya tiene una respuesta aceptada, pero creo que esa respuesta sigue siendo demasiado complicada para el problema en cuestión, y puede que incluso sea incorrecta dependiendo del usuario (sin ofender), así que pensé en compartir cómo evito el caché cuando desarrollo (no solo con Wordpress).

La mayoría de los navegadores modernos tienen algo llamado modo incógnito. En este modo, nada en tu computadora se almacena en caché, por lo que cada actualización es una descarga nueva desde el servidor. En Internet Explorer presionas Ctrl + Shift + P. En Firefox y Chrome, presionas Ctrl + Shift + N.

Si tu navegador no tiene modo incógnito, normalmente puedes forzar una recarga dura presionando Ctrl + F5 para IE, o Ctrl + Shift + R en Firefox y Chrome.

En cuanto a tu pregunta sobre los archivos CSS (y esencialmente, todos tus archivos de recursos, como imágenes y archivos Javascript), esos no se almacenan en caché de ninguna manera por WP Super Cache. Tu configuración y/o uso de este plugin no afecta cómo se sirven esos archivos. Lo que almacena en caché esos archivos es tu navegador, y esa es la razón por la que haces una recarga dura.

Lo que hace el plugin es evaluar cómo Wordpress construye tus archivos HTML (vía PHP), y guarda una copia, para que la próxima vez que alguien solicite la misma entrada, página o lo que sea, sirva la copia y no tenga que reevaluar el HTML generado por PHP nuevamente, ahorrando así tiempo de procesamiento y cargando tus páginas más rápido. (Espero que esto quede claro).

El problema con eso es que si estás agregando una marca de tiempo a la URL de tus archivos CSS mediante una función PHP, eso es una evaluación de PHP a HTML, y eso será almacenado en caché por WP Super Cache. Cada solicitud a la misma entrada tendrá la misma marca de tiempo porque a los usuarios se les sirve una copia de la evaluación original de la marca de tiempo. (Corrígeme si estoy equivocado).

La forma correcta de evitar el almacenamiento en caché de WP Super Cache es configurar la opción Don't cache for known users a true en la página de configuración del plugin.

Finalmente (y esto es una preferencia personal, ya que soy muy exigente cuando se trata de codificación), recurrir al uso del modo incógnito o recargas duras forzadas no te obligará a agregar marcado innecesario en tus páginas HTML. Por supuesto, agregar una marca de tiempo solo suma unos 13 bytes por archivo estático por solicitud, pero bueno, como dije, soy muy exigente con este tipo de cosas. Siguen siendo 13 bytes innecesarios.

Richard Neil Ilagan

141

1 feb 2012 19:55:52

Comentarios

Gracias por los consejos útiles. Desafortunadamente, ninguna de las respuestas aquí es correcta en mi caso, ya que mi solución requería borrar la caché del proveedor de servicios de red de dominio, Cloudflare, pero muchas aún eran buena información.

cboettig

1 feb 2012 21:50:13

Lo que funcionó para mí ejecutando WordPress en un stack Bitnami bajo Windows fue editar mi archivo php.ini y reiniciar mi servidor.

En la sección [opcache] cambiar el opcache.revalidate_freq a 1

opcache.revalidate_freq=1

Luego reinicié mis servidores y ahora mis páginas muestran inmediatamente los cambios realizados en mis plugins.

Steve B

31

9 oct 2020 12:27:09

¡Vaya, hay muchas formas de responder a esto! En primer lugar, preguntaste sobre dos cosas diferentes: WP Super Cache y archivos CSS. Estos se almacenan en caché de manera diferente y en lugares distintos, así que es importante identificar dónde está tu problema.

Si el problema es con WP Super Cache, puedes definir la constante DONOTCACHEPAGE en tu archivo functions.php durante el desarrollo para evitar que WP Super Cache guarde nada en caché. ¡Pero no olvides eliminarla al lanzar el sitio!

define('DONOTCACHEPAGE', true);

Cada sitio también tiene una clave única que se puede añadir a la URL para cargar una versión nueva de la página, la cual puedes encontrar en la pestaña "Avanzado", creo.

Para una solución aún mejor, deberías considerar configurar un entorno de desarrollo y un entorno de producción, donde tu entorno de desarrollo no tenga WP Super Cache activado (de nuevo, asumiendo que ese sea tu problema).

Si tu problema es con archivos CSS/JS, entonces revisa la respuesta de toscho y el comentario posterior de m0r7if3r mencionados arriba.

Matthew Boynes

7.12K

31 ene 2012 00:01:26

HyperCache desactiva el almacenamiento en caché cuando inicias sesión como administrador. No estoy seguro si WP Super Cache tiene la misma funcionalidad.

fxfuture

1.34K

30 ene 2012 23:48:04

Comentarios

Existe una opción para eso, sí.

Matthew Boynes

30 ene 2012 23:53:08

Si estás utilizando Chrome (lo cual recomiendo encarecidamente), abre el Inspector, haz clic en el ícono de configuración en la esquina inferior derecha, y bajo la sección "Red" selecciona "Desactivar caché".

moettinger

402

31 ene 2012 17:37:50

Como se mencionó para wp super cache, pero para el almacenamiento en caché general de WP en wp-config.php Cambia a esto:

define( 'WP_CACHE', false );

Referencia: codex.wordpress.org

wpcoder

111

4 mar 2017 03:41:47

Comentarios

Esta fue realmente la única solución al problema. ¡Gracias!

User

9 abr 2020 01:33:12

Puedes usar este fragmento de código https://gist.github.com/jhayiwg/92bae4330aeb738a98022d7ab63ce9b1

Generará una nueva versión de los archivos CSS y JS de tu tema activo cada vez que cargues la página

Mark

1

20 oct 2017 06:28:18

Comentarios

Por favor, publica la respuesta aquí, incluyendo todo el código relevante. Usa sitios externos solo como referencia. Tu publicación debe proporcionar una respuesta completa sin necesidad de ir a otro sitio; si el sitio de terceros deja de funcionar, tu respuesta será inútil.

cybmeta

20 oct 2017 11:22:30

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

Añade el filemtime() de tu hoja de estilos como parámetro de versión. Digamos que tu hoja de estilos por defecto está en css/default.css y css/default.min.css (no en style.css). Cuando registramos una hoja de estilos en wp_loaded (no en init), podemos pasar una versión como cuarto parámetro. Será la última hora de modificación y por lo tanto cambiará cada vez que modifiquemos el archivo.

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

// ¿Sobrescrito?
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 );
});

Si estás usando Node.js y Grunt, recomiendo encarecidamente Browsersync. Observará tus archivos y los actualizará al instante cuando cambien. También puede sincronizar la posición de desplazamiento, envíos de formularios y más entre múltiples navegadores abiertos. Muy interesante.