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

31

¿Hay alguna manera simple de evitar todo el almacenamiento en caché al probar la aparición de cambios en el sitio? Yo uso WP Super Cache. Puedo eliminar su caché usando la opción provista, eliminar el caché de mi navegador y aún algunos cambios en css o widgets no se actualizan. Intento otras soluciones como cambiar de navegador o computadora, pero debe haber un flujo de trabajo más ágil donde pueda asegurarme de que estoy viendo los cambios que hice y no algún formato anterior en caché. ¿Cuál es la mejor solución para esto?

cboettig
fuente
Parece que también hay varios complementos solo para hacer esto para CSS. ¿Es realmente necesario? ¿Estos complementos hacen algo que no hace la limpieza de la memoria caché del navegador?
cboettig
En mi caso resultó que tenía que borrar el caché creado por el proveedor de DNS (cloudflare). Gracias a todos por las sugerencias a continuación sin embargo.
cboettig
Yo uso el navegador Chrome; Su ventana de incógnito es útil cuando me encuentro con problemas de caché a nivel del navegador durante el desarrollo.
Joseph Kulandai
Espero que este complemento te ayude: wordpress.org/plugins/prevent-browser-caching
Kostya Tereshchuk

Respuestas:

32

Agregue el filemtime()de su hoja de estilo como parámetro de versión. Digamos que su hoja de estilo predeterminada está en css/default.cssy css/default.min.css( nostyle.css ). Cuando registramos una hoja de estilo en wp_loaded( noinit ), podemos pasar una versión como cuarto parámetro. Esa será la última hora modificada y, por lo tanto, cambiará cada vez que cambiemos 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';

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

Si está utilizando Node.js y Grunt, le recomiendo Browsersync . Observará sus archivos y los actualizará instantáneamente cada vez que cambien. También puede sincronizar la posición de desplazamiento, envío de formularios y más en múltiples navegadores abiertos. Muy genial.

fuxia
fuente
Muchas gracias. Parece que este es también el enfoque del complemento anterior. 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 el caché allí, supongo que no hay una forma simple de evitarlo. Sin embargo, en general, creo que esta es la mejor respuesta a este tipo de problema, así que marcaré como aceptado. Gracias de nuevo.
cboettig
¿Por qué no usas tu hoja de estilo local durante el desarrollo?
fuxia
Algunos servicios de almacenamiento en caché en la nube almacenarán en caché su archivo durante más de 8 horas, por lo que debe solicitarles que implementen un mejor servicio para el control de versiones (algunos lo hacen), cambiar los servicios o dejar de usarlos.
Wyck
@cboettig CloudFlare tiene una configuración de modo de desarrollo que detendrá el almacenamiento en caché durante una ventana de 3 horas. Luego reanuda automáticamente el almacenamiento en caché después de 3 horas.
Gilbert
7

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

así que ... después de pensarlo, encontré una excelente manera de anular el almacenamiento en caché al desarrollar nuevos sitios web ... (y es fácil).

Lo que necesitamos es decirle a wp que esta es una nueva versión de CSS como esta ...

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 agregamos:

?v='.time()

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

No olvide eliminarlo después de que haya terminado de desarrollar, de lo contrario, el almacenamiento en caché no funcionará para este archivo y se cargaría una y otra vez para los usuarios que regresan.

Esta técnica funciona para archivos css & js; espero que esto ayude;)

SEO sagivo
fuente
Bastante agradable, pero mejor aún, solo use time () en el 4º 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
Usar el tiempo como el 4º parámetro podría reducir el cromo para mantener esa versión. Esto es especialmente cierto si está almacenando en caché todo lo demás mientras trabaja en un sitio en vivo. De esta manera, está enviando un "nuevo archivo" a Chrome que usaría en lugar de tratar de mantener esa versión "antigua" durante un período de tiempo (según lo establecido para otros recursos).
Sagive SEO
No, funciona bien en cromo, lo estaba usando ayer.
Dave el
eso significa que no ha configurado el tiempo de caché / caducidad en su htaccess o mediante un complemento. Pero, lo que sea que funcione para usted;)
Sagive SEO
6

Esto puede parecer demasiado simple, pero ¿qué tal simplemente deshabilitar el almacenamiento en caché hasta que haya terminado con la parte de desarrollo de su sitio? Es más que simple encender y apagar.

mor7ifer
fuente
2
+1 - Uso la barra de herramientas "Desarrollador web" para Firefox, le permite desactivar muy rápidamente el caché (entre otras cosas)
Shane
Gracias, ¿solo es necesario deshabilitar la memoria caché del navegador? ¿WP superCache seguirá dando como resultado contenido en caché? Incluso mi servicio DNS almacena en caché, por lo que no estoy seguro si necesito deshabilitar cada caché (WP, navegador, DNS, etc.) por separado.
cboettig
Sorta depende, tendrás que jugar con él y descubrir qué necesitas hacer para tu configuración.
mor7ifer
Estoy con él, solo deshabilítalo, eso es lo que hago.
mate
4

Sé que a esta pregunta se le ha aceptado una respuesta, pero creo que esa respuesta sigue siendo demasiado complicada para el problema en cuestión, y en realidad puede ser incorrecta dependiendo del usuario (sin ofender), así que pensé que aún compartiría cómo evito el almacenamiento en caché cuando hago mi desarrollo (no solo con Wordpress).

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

Si su navegador no tiene modo de incógnito, normalmente puede forzar una recarga dura presionando Ctrl + F5para IE, o Ctrl + Shift + Ren Firefox y Chrome.

En cuanto a su pregunta con respecto a los archivos CSS (y esencialmente, todos sus archivos de activos, como imágenes y archivos Javascript), WP Super Cache no los almacena de ninguna manera. Su configuración y / o uso de este complemento no afecta la forma en que se sirven esos archivos. Lo que almacena en caché esos archivos es su navegador , y esa es la razón por la que realiza una recarga dura.

Lo que hace el complemento es evaluar cómo Wordpress construye sus archivos HTML (a través de PHP) y almacena una copia, de modo que la próxima vez que alguien solicite la misma publicación, página o lo que sea, sirva la copia, y no tendrá que vuelva a evaluar el HTML generado por PHP nuevamente y, por lo tanto, ahorre algo de tiempo de cómputo, cargando sus páginas mucho más rápido. (Espero que esté claro).

El problema con eso es que, si está marcando una marca de tiempo en la URL de sus archivos CSS a través de una función PHP, esa es una evaluación PHP a HTML, y eso será almacenado en caché por WP Super Cache. Cada solicitud a la misma publicación tendrá la misma marca de tiempo porque los usuarios reciben una copia de la evaluación de marca de tiempo original. (Corrígeme si me equivoco.)

La forma correcta de almacenamiento en caché de Super GT caché de derivación es para establecer la opción Don't cache for known usersde trueen las páginas de configuración del plugin.

Finalmente (y esta es una preferencia personal, ya que soy muy exigente en lo que respecta a la codificación), recurrir al uso de incógnitas o recargas forzadas no requerirá que agregue marcas innecesarias en sus páginas HTML. Por supuesto, agregar una marca de tiempo solo agrega alrededor de 13 bytes por archivo estático por solicitud, pero bueno, como dije, soy fanático de este tipo de cosas. Todavía son 13 bytes innecesarios.

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

Gosh, muchas maneras de responder a esta! En primer lugar, preguntaste sobre dos cosas diferentes: WP Super Cache y archivos CSS. Estos se almacenan en caché de manera diferente, en diferentes lugares, por lo que es importante reconocer dónde está su problema.

Si WP Super Cache, puede definir la constante DONOTCACHEPAGEen sus functions.php durante el desarrollo para evitar que WP Super Cache almacene en caché cualquier cosa. ¡No olvides eliminar esto en el lanzamiento!

define('DONOTCACHEPAGE', true);

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

Desglosándolo en una solución aún mejor, debería considerar configurar un entorno de desarrollo y un entorno de producción, donde su entorno de desarrollo no tenga WP Super Cache habilitado (nuevamente, suponiendo que ese sea su problema).

Si su problema es con archivos CSS / JS, vea la respuesta de toscho y el comentario posterior de m0r7if3r arriba.

Matthew Boynes
fuente
1

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

fxfuture
fuente
Hay una opción para eso, sí.
Matthew Boynes
1

Si está utilizando Chrome (lo cual le recomiendo), abra Inspector, haga clic en el icono de configuración en la esquina inferior derecha y en "Red" seleccione "Desactivar caché".

Moettinger
fuente
0

Como se dijo para wp super cache, pero para el almacenamiento en caché general de WP en wp-config.php Change to this:

define( 'WP_CACHE', false );

Referencia: codex.wordpress.org

wpcoder
fuente
-1

Puede usar este fragmento https://gist.github.com/jhayiwg/92bae4330aeb738a98022d7ab63ce9b1

Generará una nueva versión de su tema activo css y js cada vez que cargue la página

marca
fuente
Por favor, publique la respuesta aquí, incluyendo todo el código relevante. Use sitios externos solo como referencia. Su publicación debe proporcionar una respuesta completa sin la necesidad de ir a otro sitio; si el sitio de un tercero
deja de funcionar