Bagaimana Anda menghindari caching selama pengembangan?

31

Apakah ada cara sederhana yang mencegah semua caching saat menguji penampilan perubahan ke situs? Saya menggunakan WP Super Cache. Saya dapat menghapus cache-nya menggunakan opsi yang disediakan, menghapus cache untuk browser saya, dan masih ada beberapa perubahan pada css atau widget yang tidak di-refresh. Saya mencoba work-arounds lainnya seperti berpindah browser atau komputer, tetapi harus ada alur kerja yang lebih stream-stream di mana saya dapat memastikan saya melihat perubahan yang saya buat dan bukan beberapa format sebelumnya di-cache? Apa solusi terbaik untuk ini?

cboettig
sumber
Sepertinya ada juga beberapa plugin hanya untuk melakukan ini untuk CSS. Apakah ini benar-benar perlu? Apakah plugin itu melakukan sesuatu yang tidak menghapus cache browser?
cboettig
Dalam kasus saya ternyata saya harus menghapus cache yang dibuat oleh penyedia DNS (cloudflare). Terima kasih untuk semua saran di bawah ini.
cboettig
Saya menggunakan browser Chrome; Jendela penyamarannya menjadi praktis, ketika saya menemukan masalah cache tingkat browser selama pengembangan.
Joseph Kulandai
Semoga plugin ini akan membantu Anda: wordpress.org/plugins/prevent-browser-caching
Kostya Tereshchuk

Jawaban:

32

Tambahkan filemtime()stylesheet Anda sebagai parameter versi. Katakanlah, stylesheet default Anda ada di css/default.cssdan css/default.min.css( tidakstyle.css ). Ketika kami mendaftarkan stylesheet aktif wp_loaded( tidakinit ), kami dapat mengirimkan versi sebagai parameter keempat. Itu akan menjadi waktu modifikasi terakhir dan karenanya berubah setiap kali kami mengubah file.

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

Jika Anda menggunakan Node.js dan Grunt, saya sangat merekomendasikan Browsersync . Ini akan menonton file Anda dan memperbaruinya secara instan setiap kali mereka berubah. Itu juga dapat menyinkronkan posisi gulir, pengiriman formulir dan banyak lagi di beberapa browser terbuka. Sangat keren.

fuxia
sumber
Terimakasih banyak. Tampaknya ini juga merupakan pendekatan dari plugin di atas. Itu tidak menyelesaikan masalah dalam kasus saya karena penyedia DNS saya (CloudFlare) sedang caching file css, jadi saya harus menghapus cache di sana - kira tidak ada cara sederhana untuk itu. Namun secara umum, saya pikir ini adalah jawaban terbaik untuk masalah semacam ini jadi saya akan tandai diterima. Terima kasih lagi.
cboettig
Mengapa Anda tidak menggunakan stylesheet lokal Anda selama pengembangan?
fuxia
Beberapa layanan caching cloud akan melakukan cache file Anda selama 8 + jam, jadi Anda harus meminta mereka untuk mengimplementasikan layanan yang lebih baik untuk versi (beberapa melakukan ini), mengubah layanan, atau berhenti menggunakannya.
Wyck
@cboettig CloudFlare memiliki pengaturan mode dev yang akan menghentikan caching selama 3 jam. Itu kemudian secara otomatis melanjutkan caching setelah 3 jam.
Gilbert
7

Setelah mencari solusi sederhana berkali-kali saya memutuskan untuk menemukan sesuatu yang berfungsi!

jadi ... setelah memikirkannya, saya menemukan cara yang bagus untuk mengganti caching sambil mengembangkan situs web baru ... (dan mudah).

Yang kita butuhkan adalah memberi tahu wp bahwa ini adalah versi CSS baru seperti ini ...

Sebelum perubahan:

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

Setelah perubahan:

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

Inilah yang kami tambahkan:

?v='.time()

Penjelasan:
Kami pada dasarnya menambahkan nomor versi dinamis ke file css yang memaksa browser untuk memuat css baru setiap kali kami memperbaruinya.

Jangan lupa untuk menghapusnya setelah Anda selesai mengembangkannya jika tidak, caching Anda tidak akan berfungsi untuk file ini dan itu akan dimuat untuk pengguna yang kembali berulang kali.

Teknik ini berfungsi untuk file css & js - semoga ini membantu;)

SEO yang sombong
sumber
Cukup bagus, tetapi lebih baik lagi, cukup gunakan time () pada parameter ke-4 yang merupakan versi. Yang akan memberi Anda:wp_enqueue_style( 'maincss', get_template_directory_uri() . '/css/style.css', array(), time(), 'all' );
Dave
Menggunakan waktu sebagai parameter ke-4 dapat menyebabkan chrome mempertahankan versi itu. Ini terutama benar jika Anda melakukan caching semua hal lain saat Anda bekerja di situs langsung. Dengan cara ini Anda mengirimkan "file baru" ke chrome yang akan ia gunakan alih-alih mencoba mempertahankan versi "lama" itu untuk sejumlah waktu (sebagaimana ditetapkan untuk sumber daya lainnya).
Sagive SEO
Tidak, berfungsi dengan baik di chrome, saya menggunakannya kemarin.
Dave
itu berarti Anda tidak mengatur waktu cache / kedaluwarsa di htaccess Anda atau melalui plugin. Tapi, apa pun yang bekerja untuk Anda;)
Sagive SEO
6

Ini mungkin tampak terlalu sederhana, tetapi bagaimana dengan hanya menonaktifkan caching sampai Anda selesai dengan bagian pengembangan situs Anda? Lebih mudah untuk dihidupkan dan dimatikan.

mor7ifer
sumber
2
+1 - Saya menggunakan bilah alat "Pengembang Web" untuk Firefox, memungkinkan Anda untuk dengan cepat menonaktifkan cache (antara lain)
Shane
Terima kasih - apakah hanya perlu menonaktifkan cache browser? Akankah WP superCache tetap menghasilkan konten yang di-cache? Bahkan cache layanan DNS saya, jadi saya tidak yakin apakah saya harus menonaktifkan setiap cache (WP, browser, DNS, dll) secara terpisah.
cboettig
Agak tergantung, Anda harus bermain-main dengannya dan mencari tahu apa yang perlu Anda lakukan untuk konfigurasi Anda.
mor7ifer
Saya bersamanya, cukup nonaktifkan saja, itulah yang saya lakukan.
matt
4

Saya tahu bahwa pertanyaan ini telah menerima jawaban, tetapi saya pikir jawaban itu masih terlalu rumit untuk masalah yang ada, dan mungkin sebenarnya tidak benar tergantung pada pengguna (jangan tersinggung meskipun), jadi saya pikir saya masih akan membagikan bagaimana saya melewati caching ketika saya melakukan dev (bukan hanya dengan Wordpress).

Sebagian besar browser modern memiliki sesuatu yang disebut mode penyamaran . Dalam mode ini, tidak ada apa pun di komputer Anda yang di-cache, sehingga setiap penyegaran adalah pengunduhan dari server. Di Internet Explorer Anda menekan Ctrl + Shift + P. Di Firefox dan Chrome, Anda menekan Ctrl + Shift + N.

Jika browser Anda tidak memiliki mode penyamaran, Anda biasanya dapat memaksa pemuatan ulang dengan menekan Ctrl + F5untuk IE, atau Ctrl + Shift + Rdi Firefox dan Chrome.

Adapun pertanyaan Anda tentang file CSS (dan pada dasarnya, semua file aset Anda, seperti gambar dan file Javascript), itu tidak di-cache dengan cara apa pun oleh WP Super Cache. Pengaturan dan / atau penggunaan plugin ini tidak memengaruhi cara file-file tersebut disajikan. Apa caching file-file itu adalah browser Anda , dan itulah alasan mengapa Anda melakukan pemuatan ulang yang sulit.

Apa yang dilakukan plugin adalah mengevaluasi bagaimana Wordpress membangun file HTML Anda (melalui PHP), dan menyimpan salinan, sehingga saat berikutnya seseorang meminta postingan yang sama, halaman, atau apa pun, itu melayani salinan, dan tidak perlu mengevaluasi kembali HTML yang dihasilkan PHP lagi, dan karenanya menghemat waktu komputasi, memuat halaman Anda lebih cepat. (Saya harap itu jelas.)

Masalahnya adalah, jika Anda menampar timestamp di URL file CSS Anda melalui fungsi PHP, itu adalah evaluasi PHP ke HTML, dan itu akan di -cache oleh WP Super Cache. Setiap permintaan ke pos yang sama akan memiliki stempel waktu yang sama karena pengguna dilayani salinan evaluasi stempel waktu asli. (Koreksi saya jika saya salah.)

Cara yang benar untuk caching memotong WP Super Cache adalah untuk menetapkan pilihan Don't cache for known usersuntuk truedi halaman pengaturan plugin.

Akhirnya (dan ini adalah preferensi pribadi, karena saya benar-benar ngotot dalam hal pengkodean), beralih ke penggunaan penyamaran atau pemuatan ulang paksa tidak akan mengharuskan Anda untuk menambahkan markup yang tidak perlu pada halaman HTML Anda. Tentu saja, menambahkan stempel waktu hanya menambahkan sekitar 13 byte per file statis per permintaan, tapi hei, seperti yang saya katakan, saya ngotot untuk hal semacam ini. Masih 13 byte tidak perlu.

Richard Neil Ilagan
sumber
Terima kasih atas tips yang bermanfaat. Sayangnya tidak ada jawaban di sini yang benar dalam kasus saya, karena solusi saya diperlukan membersihkan cache penyedia Layanan Jaringan Domain, cloudflare, tetapi banyak yang masih informasi yang baik.
cboettig
2

Astaga, banyak cara untuk menjawab yang satu ini! Pertama dan terpenting, Anda bertanya tentang dua hal berbeda: WP Super Cache dan file CSS. Ini di-cache secara berbeda, di tempat yang berbeda, jadi penting untuk mengenali di mana masalah Anda.

Jika WP Super Cache, Anda dapat menentukan konstanta DONOTCACHEPAGEdi functions.php Anda selama pengembangan untuk mencegah WP Super Cache dari caching apa pun. Jangan lupa untuk menghapus ini saat diluncurkan!

define('DONOTCACHEPAGE', true);

Setiap situs juga memiliki kunci unik untuk menambahkan URL untuk memuat versi halaman baru, yang dapat Anda temukan di tab "Advanced", saya percaya.

Memecahnya menjadi solusi yang lebih baik lagi, Anda harus mempertimbangkan pengaturan lingkungan pengembangan dan lingkungan produksi, di mana lingkungan pengembangan Anda tidak mengaktifkan WP Super Cache (sekali lagi, dengan asumsi itu masalah Anda).

Jika masalah Anda adalah pada file CSS / JS, lihat jawaban oleh toscho dan komentar selanjutnya oleh m0r7if3r di atas.

Matthew Boynes
sumber
1

HyperCache menonaktifkan caching ketika Anda login sebagai admin. Tidak yakin apakah WP Super Cache memiliki fungsi yang sama.

masa depan
sumber
Ada opsi untuk itu, ya.
Matthew Boynes
1

Jika Anda menggunakan Chrome (yang sangat saya sarankan), buka Inspektur, klik ikon pengaturan di sudut kanan bawah, dan di bawah "Jaringan" pilih "Nonaktifkan Cache."

pelukis kecil
sumber
0

Seperti yang dikatakan untuk wp super cache, tetapi untuk caching WP umum di wp-config.php Ubah ke ini:

define( 'WP_CACHE', false );

Referensi: codex.wordpress.org

wpcoder
sumber
-1

Anda dapat menggunakan potongan ini https://gist.github.com/jhayiwg/92bae4330aeb738a98022d7ab63ce9b1

Ini akan menghasilkan versi baru css dan js tema aktif Anda setiap kali Anda memuat halaman

Menandai
sumber
Silakan, kirim jawabannya di sini, termasuk semua kode yang relevan. Gunakan situs eksternal hanya untuk referensi. Posting Anda harus memberikan jawaban lengkap tanpa harus pergi ke situs lain; jika situs pihak ketiga turun, jawaban Anda tidak akan berguna ..
cybmeta