คุณจะหลีกเลี่ยงการแคชในระหว่างการพัฒนาได้อย่างไร

มีวิธีง่าย ๆ ในการป้องกันการแคชเมื่อทำการทดสอบลักษณะที่ปรากฏของการเปลี่ยนแปลงในเว็บไซต์หรือไม่? ฉันใช้ WP Super Cache ฉันสามารถลบแคชโดยใช้ตัวเลือกที่มีให้ลบแคชสำหรับเบราว์เซอร์ของฉันและยังคงการเปลี่ยนแปลงบางอย่างใน css หรือวิดเจ็ตไม่รีเฟรช ฉันลองแก้ไขอื่น ๆ เช่นสลับเบราว์เซอร์หรือคอมพิวเตอร์ แต่ต้องมีเวิร์กโฟลว์เรียงรายมากขึ้นที่ฉันสามารถมั่นใจได้ว่าฉันกำลังดูการเปลี่ยนแปลงที่ฉันทำและไม่ใช่รูปแบบก่อนหน้านี้บางแคช? ทางออกที่ดีที่สุดสำหรับสิ่งนี้คืออะไร?

เพิ่ม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 และฮึดฮัดผมขอแนะนำBrowsersync มันจะดูไฟล์ของคุณและอัปเดตทันทีเมื่อมีการเปลี่ยนแปลง นอกจากนี้ยังสามารถซิงโครไนซ์ตำแหน่งการเลื่อนส่งแบบฟอร์มและอื่น ๆ อีกมากมายผ่านเบราว์เซอร์ที่เปิดอยู่หลายแห่ง เด็ดมาก

หลังจากค้นหาวิธีแก้ปัญหาง่าย ๆ หลายครั้งฉันตัดสินใจที่จะหาสิ่งที่ใช้งานได้!

ดังนั้น ... หลังจากคิดเกี่ยวกับมันฉันพบวิธีที่ดีในการแทนที่การแคชขณะพัฒนาเว็บไซต์ใหม่ ... (และใช้งานง่าย)

สิ่งที่เราต้องการคือบอก 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 - หวังว่านี่จะช่วยได้;)

สิ่งนี้อาจดูเรียบง่ายเกินไป แต่จะปิดการใช้งานการแคชจนกว่าคุณจะทำส่วนการพัฒนาของไซต์ของคุณ มันง่ายกว่าการเปิดและปิด

ฉันรู้ว่าคำถามนี้มีคำตอบที่ยอมรับได้ แต่ฉันคิดว่าคำตอบนั้นยังซับซ้อนเกินไปสำหรับปัญหาที่เกิดขึ้นจริงและอาจไม่ถูกต้องขึ้นอยู่กับผู้ใช้ (ไม่มีการกระทำผิดกฎหมาย) ดังนั้นฉันคิดว่าฉันยังคงแบ่งปัน ฉันจะบายพาสการแคชได้อย่างไรเมื่อฉันทำ 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) และจัดเก็บสำเนาอย่างไรดังนั้นในครั้งต่อไปที่มีคนร้องขอโพสต์เพจหรืออะไรก็ตามมันจะทำหน้าที่คัดลอกและไม่จำเป็นต้อง ประเมิน HTML ที่สร้างโดย PHP อีกครั้งดังนั้นจึงประหยัดเวลาในการคำนวณโหลดหน้าเว็บของคุณที่เร็วกว่ามาก (ฉันหวังว่าชัดเจน)

ปัญหาที่เกิดขึ้นคือถ้าคุณกำลังตบที่ประทับเวลาใน URL ไฟล์ CSS ของคุณผ่านฟังก์ชั่น PHP นั่นคือการประเมิน PHP เป็น HTML และจะถูกแคชโดย WP Super Cache ทุกคำขอไปยังโพสต์เดียวกันจะมีการประทับเวลาเท่ากันเพราะผู้ใช้จะได้รับสำเนาของการประเมินผลการประทับเวลาดั้งเดิม (ช่วยแก้ให้ด้วยนะถ้าฉันผิด.)

วิธีที่ถูกต้องในการข้ามการแคช WP Super Cache คือการตั้งค่าตัวเลือกDon't cache for known usersเป็นtrueอยู่ในหน้าการตั้งปลั๊กอิน

ในที่สุด (และนี่คือการตั้งค่าส่วนตัวเนื่องจากฉันเป็น stickler จริงเมื่อมันมาถึงการเขียนโค้ด) โดยหันไปใช้การไม่ระบุตัวตนหรือการบังคับให้โหลดซ้ำแบบยาก ๆ คุณไม่จำเป็นต้องเพิ่มมาร์กอัปที่ไม่จำเป็นในหน้า HTML ของคุณ แน่นอนการเพิ่มการประทับเวลาเพียงเพิ่มประมาณ 13 ไบต์ต่อไฟล์คงที่ต่อคำขอ แต่เฮ้อย่างที่ฉันบอกว่าฉันเป็นคนติดขัดสำหรับสิ่งประเภทนี้ มันยังไม่จำเป็น 13 ไบต์

เอ๊ะมีหลายวิธีที่จะตอบคำถามนี้! ก่อนอื่นคุณถามถึงสองสิ่งที่ต่างกัน: WP Super Cache และไฟล์ CSS สิ่งเหล่านี้ถูกแคชแตกต่างกันในสถานที่ต่าง ๆ ดังนั้นจึงเป็นเรื่องสำคัญที่จะต้องทราบว่าปัญหาของคุณอยู่ที่ใด

หาก WP Super Cache คุณสามารถกำหนดค่าคงที่DONOTCACHEPAGEใน functions.php ของคุณในระหว่างการพัฒนาเพื่อป้องกัน WP Super Cache จากการแคชอะไรก็ได้ อย่าลืมลบในการเปิดตัว!

define('DONOTCACHEPAGE', true);

แต่ละไซต์มีคีย์เฉพาะเพื่อผนวกเข้ากับ URL เพื่อโหลดเวอร์ชันใหม่ของหน้าเว็บซึ่งคุณสามารถหาได้ในแท็บ "ขั้นสูง" ฉันเชื่อว่า

เมื่อพิจารณาถึงโซลูชันที่ดียิ่งขึ้นคุณควรพิจารณาการตั้งค่าสภาพแวดล้อมการพัฒนาและสภาพแวดล้อมการผลิตซึ่งสภาพแวดล้อมการพัฒนาของคุณไม่ได้เปิดใช้งาน WP Super Cache (อีกครั้งโดยสมมติว่าเป็นปัญหาของคุณ)

หากปัญหาของคุณอยู่กับไฟล์ CSS / JS ให้ดูคำตอบโดย toscho และความคิดเห็นที่ตามมาโดย m0r7if3r ด้านบน

HyperCache ปิดใช้งานการแคชเมื่อคุณเข้าสู่ระบบในฐานะผู้ดูแล ไม่แน่ใจว่า WP Super Cache มีหน้าที่การใช้งานเหมือนกันหรือไม่

หากคุณกำลังใช้ Chrome (ซึ่งฉันแนะนำเป็นอย่างยิ่ง) ให้เปิดตัวตรวจสอบคลิกไอคอนการตั้งค่าที่มุมล่างขวาและภายใต้ "เครือข่าย" ให้เลือก "ปิดใช้งานแคช"

ตามที่กล่าวไว้สำหรับ wp super cache แต่สำหรับการแคช WP ทั่วไปในwp-config.php เปลี่ยนเป็น:

define( 'WP_CACHE', false );

การอ้างอิง: codex.wordpress.org

คุณสามารถใช้ตัวอย่างนี้https://gist.github.com/jhayiwg/92bae4330aeb738a98022d7ab63ce9b1

มันจะสร้างเวอร์ชันใหม่ของธีมที่คุณใช้อยู่ css และ js ทุกครั้งที่คุณโหลดหน้าเว็บ