ฉันกำลังพัฒนาเว็บไซต์โดยใช้ซอร์สโค้ด Wordpress ผ่าน XAMPP บางครั้งฉันเปลี่ยนโค้ด CSS, scrips หรืออย่างอื่นและฉันสังเกตว่าเบราว์เซอร์ของฉันต้องใช้เวลาในการปรับเปลี่ยน สิ่งนี้ทำให้ฉันต้องใช้เบราว์เซอร์หลายตัวเพื่อรีเฟรชและหากไม่ใช้รูปแบบใหม่ฉันลองใช้รูปแบบที่สองและเป็นแบบนี้เสมอ
มีวิธีหลีกเลี่ยงปัญหานี้หรือไม่? บางครั้งฉันเปลี่ยนรหัสโดยไม่ได้แจ้งให้ทราบถึงการแก้ไขก่อนหน้านี้
คำตอบ:
กดCtrl+ F5(หรือCtrl+ Shift+ R) เพื่อบังคับให้แคชโหลดซ้ำ ผมเชื่อว่าแม็คการใช้งานCmd+ +ShiftR
ใน PHP คุณสามารถปิดการใช้งานแคชได้โดยตั้งค่าวันหมดอายุเป็นเวลาในอดีตด้วยส่วนหัว:
header("Expires: Tue, 01 Jan 2000 00:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
คุณสามารถปิดการใช้งานแคชของ Chrome ได้โดยเปิดเครื่องมือสำหรับนักพัฒนาโดยF12คลิกที่ไอคอนรูปเฟืองที่มุมล่างขวาแล้วเลือกปิดการใช้งานแคชในกล่องโต้ตอบการตั้งค่าดังนี้:
ภาพที่นำมาจากคำตอบนี้
พิมพ์about:configลงในแถบ URL network.http.use-cacheแล้วหารายการที่ชื่อว่า falseตั้งค่านี้
หากคุณต้องการหลีกเลี่ยงสิ่งนั้นในฝั่งไคลเอ็นต์คุณสามารถเพิ่มบางอย่างเช่น?v=1.xลิงค์ไฟล์ css เมื่อเนื้อหาไฟล์มีการเปลี่ยนแปลง ตัวอย่างเช่นหากมี<link rel="stylesheet" type="text/css" href="css-file-name.css">คุณสามารถเปลี่ยนเป็น<link rel="stylesheet" type="text/css" href="css-file-name.css?v=1.1">จะข้ามการแคช
หากคุณสามารถเขียน php คุณสามารถเขียน:
<script src="foo.js<?php echo '?'.mt_rand(); ?>" ></script>
<link rel="stylesheet" type="text/css" href="foo.css<?php echo '?'.mt_rand(); ?>" />
<img src="foo.png<?php echo '?'.mt_rand(); ?>" />
มันจะสดชื่นเสมอ!
แก้ไข: แน่นอนว่ามันไม่สามารถใช้ได้จริงสำหรับทั้งเว็บไซต์เนื่องจากคุณจะไม่เพิ่มสิ่งนี้ด้วยตนเองสำหรับทุกสิ่ง
ตรวจสอบสิ่งนี้: ฉันจะบังคับให้เบราว์เซอร์ใช้สไตล์ชีตเวอร์ชันล่าสุดได้อย่างไร
สมมติว่าไฟล์ css ของคุณคือfoo.cssคุณสามารถบังคับให้ไคลเอนต์ใช้เวอร์ชันล่าสุดได้โดยการต่อท้ายสตริงข้อความค้นหาดังที่แสดงด้านล่าง
<link rel="stylesheet" href="foo.css?v=1.1">
มุมมองของนักพัฒนา
หากคุณอยู่ในโหมดการพัฒนา (เช่นในคำถามเดิม) แนวทางที่ดีที่สุดคือปิดการใช้งานแคชในเบราว์เซอร์ผ่านเมตาแท็ก HTML เพื่อให้แนวทางนี้เป็นสากลคุณต้องแทรกเมตาแท็กอย่างน้อยสามรายการดังที่แสดงด้านล่าง
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
ด้วยวิธีนี้คุณในฐานะนักพัฒนาเพียง แต่ต้องรีเฟรชหน้าเพื่อดูการเปลี่ยนแปลง แต่อย่าลืมแสดงความคิดเห็นว่าโค้ดเมื่ออยู่ในการผลิตหลังจากการแคชทั้งหมดเป็นสิ่งที่ดีสำหรับลูกค้าของคุณ
โหมดการผลิต
เนื่องจากในการใช้งานจริงคุณจะอนุญาตให้แคชและลูกค้าของคุณไม่จำเป็นต้องรู้วิธีบังคับให้โหลดใหม่ทั้งหมดหรือเคล็ดลับอื่นใดคุณต้องรับประกันว่าเบราว์เซอร์จะโหลดไฟล์ใหม่ และใช่ในกรณีนี้แนวทางที่ดีที่สุดที่ฉันรู้คือเปลี่ยนชื่อไฟล์
<script src="foo.js?<?php echo date('YmdHis',filemtime('foo.js'));?>"></script>
มันจะรีเฟรชหากแก้ไข
ตรวจสอบให้แน่ใจว่าไม่ได้เกิดขึ้นจาก DNS ของคุณ ตัวอย่างเช่น Cloudflare มีที่คุณสามารถเปิดโหมดการพัฒนาซึ่งบังคับให้ล้างสไตล์ชีทและรูปภาพของคุณเนื่องจาก Cloudflare มีแคชแบบเร่ง การดำเนินการนี้จะปิดใช้งานและบังคับให้อัปเดตทุกครั้งที่มีผู้เยี่ยมชมไซต์ของคุณ
ลองล้างแคชเบราว์เซอร์ของคุณ
คุณสามารถปิดการแคชด้วยแถบเครื่องมือนักพัฒนาเว็บของ Firefox
ส่วนขยาย Firefox นี้เป็นทางออกเดียวที่ฉันสามารถใช้งานได้: https://addons.mozilla.org/en-us/firefox/addon/css-reloader/
คำตอบที่ยอมรับข้างต้นถูกต้อง อย่างไรก็ตามหากคุณต้องการโหลดแคชซ้ำเป็นระยะ ๆ และคุณกำลังใช้ Firefox เครื่องมือสำหรับนักพัฒนาเว็บ (ภายใต้รายการเมนูเครื่องมือ ณ เดือนพฤศจิกายน 2015) จะมีตัวเลือกเครือข่าย ซึ่งรวมถึงปุ่มโหลดซ้ำ เลือกโหลดซ้ำเพื่อรีเซ็ตแคชครั้งเดียว
หากคุณต้องการให้แน่ใจว่า Chrome ได้รับการรีเฟรชไฟล์เหล่านี้อย่างเหมาะสมสำหรับผู้ใช้ทุกคนคุณจะต้องมีmust-revalidateในCache-Controlส่วนหัว วิธีนี้จะทำให้ Chrome ตรวจสอบไฟล์อีกครั้งเพื่อดูว่าจำเป็นต้องดึงข้อมูลอีกครั้งหรือไม่
แนะนำส่วนหัวการตอบกลับต่อไปนี้:
Cache-Control: must-validate
สิ่งนี้จะบอกให้ Chrome ตรวจสอบกับเซิร์ฟเวอร์และดูว่ามีไฟล์ใหม่กว่าหรือไม่ หากมีไฟล์ใหม่กว่าจะได้รับในการตอบกลับ หากไม่เป็นเช่นนั้นจะได้รับการตอบกลับ 304 และการรับรองว่าข้อมูลในแคชเป็นข้อมูลล่าสุด
หากคุณไม่ได้ตั้งค่าส่วนหัวนี้หากไม่มีการตั้งค่าอื่นใดที่ทำให้ไฟล์ไม่ถูกต้อง Chrome จะไม่ตรวจสอบกับเซิร์ฟเวอร์เพื่อดูว่ามีเวอร์ชันที่ใหม่กว่าหรือไม่
นี่คือบล็อกโพสต์ที่กล่าวถึงปัญหาเพิ่มเติม
แทน link-tag ใน html-head ไปยังไฟล์ css ภายนอกให้ใช้ php-include:
<style>
<?php
include("style.css");
?>
</style>
แฮ็ค แต่ใช้ได้กับฉัน :)
ฉันตัดสินใจแล้วว่าเนื่องจากเบราว์เซอร์ไม่ได้ตรวจสอบไฟล์ css และ js เวอร์ชันใหม่ฉันจึงเปลี่ยนชื่อไดเรกทอรี css และ js ทุกครั้งที่ฉันทำการเปลี่ยนแปลง ฉันใช้ css1 ถึง css9 และ js1 ถึง js9 เป็นชื่อไดเร็กทอรี เมื่อฉันได้ 9 ฉันเริ่มต้นใหม่ที่ 1 มันเป็นความเจ็บปวด แต่มันก็ทำงานได้ดีทุกครั้ง เป็นเรื่องน่าขันที่ต้องบอกให้ผู้ใช้พิมพ์
ฉันมีกรณีที่ฉันต้องสามารถสร้างและเปลี่ยนสไตล์ชีตของฉันได้จากระยะไกลซึ่งส่งผลกระทบต่อลูกค้าหลายพันราย แต่เนื่องจากความเสี่ยงที่เครือข่ายจะโหลดหนักฉันจึงไม่ได้ปิดแคช
เนื่องจากฉันสามารถเปลี่ยนเนื้อหา HTML ได้จากระยะไกลฉันจึงเชื่อมโยงสไตล์ชีตด้วยแฮชโค้ดที่ตรงกับเนื้อหาของสไตล์ชีท
https://example.com/contents/stylesheetctrl?id=12345&hash=-1456405808
ที่กล่าวว่าฉันยังใช้ฟังก์ชันจาวาสคริปต์ฝั่งไคลเอ็นต์เพื่อแทนที่โหนดและแอตทริบิวต์อย่างระมัดระวังเมื่อเนื้อหา HTML เปลี่ยนแปลงซึ่งหมายความว่าแท็กลิงก์สไตล์ชีทจะไม่ถูกแทนที่มีเพียงแอตทริบิวต์ href เท่านั้นที่จะเปลี่ยน
สถานการณ์นี้ใช้งานได้ดีใน Chrome, Firefox และ Edge บน Windows รวมถึง Chrome บน Android แต่ไม่สามารถใช้งานได้กับผู้ใช้เว็บบน Android เสมอไป ดังนั้นฉันไม่มากก็น้อยกำลังมองหาสิ่งที่จะบังคับ / ทริกเกอร์การอัปเดตโดยใช้จาวาสคริปต์ - อย่างเหมาะสมที่สุดโดยไม่จำเป็นต้องโหลดหน้าซ้ำ
คุณสามารถใช้แถบเครื่องมือสำหรับนักพัฒนา Firefox / Chrome:
ลองสิ่งนี้:
link href="styles/style.css?=time()" rel="stylesheet" type="text/css"
หากคุณต้องการบางสิ่งบางอย่างหลังจาก "?" ซึ่งจะแตกต่างกันทุกครั้งที่เข้าถึงเพจจากนั้นก็time()จะทำ การปล่อยสิ่งนี้ไว้ในโค้ดของคุณอย่างถาวรไม่ใช่ความคิดที่ดีจริงๆเนื่องจากจะทำให้การโหลดหน้าเว็บช้าลงและอาจไม่จำเป็น
ฉันพบว่าการบังคับให้รีเฟรชสไตล์ชีตมีประโยชน์หากคุณได้ทำการเปลี่ยนแปลงอย่างมากกับเค้าโครงของหน้าและการเข้าถึงสไตล์ชีตใหม่มีความสำคัญต่อการมีสิ่งที่เหมาะสมปรากฏบนหน้าจอ