แนบรุ่นที่บ่งชี้ว่า แฟ้มแบบคงที่รุ่นเก่าที่เก็บไว้ชั่วคราวเป็นปัจจุบันเพื่อที่จะไม่ได้ใช้

ย่อหน้าก่อนหน้านี้ยาวมากดังนั้นหากคุณดูเฉพาะโปรแกรมให้ข้ามไป

สิ่งแวดล้อม

Visual Studio

• Visual Studio 2019

ASP.NET Core

• 3.1 (หน้า Razor, MVC)

เกี่ยวกับการแคชแฟ้มบนเว็บเพจ

เมื่อคุณเข้าถึงเว็บเพจ ยกเว้น HTML แฟ้ม .js (Javascript) แฟ้ม .css (สไตล์ชีต) และแฟ้มรูปจะถูกดาวน์โหลดไปยังไคลเอนต์เพื่อดู และทํางาน อย่างไรก็ตามไฟล์ภาพบางไฟล์อาจมีขนาดใหญ่และค่าใช้จ่ายที่เพิ่มขึ้นต่อการดาวน์โหลด นอกจากนี้สําหรับ.jsและ.cssไฟล์เดียวกันมักจะใช้สําหรับหน้าอื่น ๆ ดังนั้นจึงไม่สมเหตุสมผลที่จะดาวน์โหลดไฟล์เหล่านี้ทุกครั้ง ไฟล์เหล่านี้อาจถูกจัดเก็บไว้ในเบราว์เซอร์ชั่วคราวหลังจากดาวน์โหลด นี้เรียกว่า แคช.

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

ปัญหาที่เกิดจากแคช

แฟ้มบนเซิร์ฟเวอร์และแฟ้มที่เก็บไว้ชั่วคราวเหมือนกันมักจะขึ้นอยู่กับเส้นทางแฟ้มที่อธิบายไว้ใน HTML ถ้าเส้นทางแฟ้มเหมือนกัน (อาจมีเงื่อนไขอื่น ๆ แต่เส้นทางแฟ้มตกลง)

ต่อไปนี้เป็นตัวอย่างของเส้นทางแฟ้ม พารามิเตอร์คุณสมบัติ href และ src ใช้

<!-- スタイルシート (.css) -->
<link rel="stylesheet" href="/css/site.css" />

<!-- 画像ファイル -->
<img src="/image/sample.png" alt="サンプル画像" />

<!-- JavaScript (.js) -->
<script src="/js/site.js"></script>

อย่างไรก็ตาม ถ้าลักษณะการทํางานนี้เกิดขึ้น ซึ่งอาจเป็นปัญหา

ตัวอย่างเช่น ถ้าผู้ใช้มีแฟ้ม JavaScript รุ่น 1 ในครั้งแรกที่ผู้ใช้เข้าถึง แฟ้ม JavaScript รุ่น 1 จะถูกแคชไว้ จากนั้นคุณเผยแพร่แฟ้ม JavaScript รุ่น 2 บนฝั่งเซิร์ฟเวอร์ ถ้าแฟ้ม JavaScript มีเส้นทางเดียวกันเมื่อผู้ใช้เข้าถึงเพจเดียวกัน ซึ่งอาจทําให้ผู้เผยแพร่ล้มเหลวโดยไม่ได้ตั้งใจ

เวลานี้หนึ่งในปฏิกิริยาของผู้ใช้"พยายามที่จะลบแคช"ผมคิดว่ามักจะเห็นเพราะนี้อาจจะเป็นเหตุผล

วิธีแก้ปัญหาการแคชฝั่งเซิร์ฟเวอร์

ดังที่กล่าวไว้ก่อนหน้านี้การใช้ไฟล์ที่แคชไว้ขึ้นอยู่กับเส้นทางไฟล์ (URL) อย่างมาก

เมื่อคุณปรับปรุงแฟ้ม คุณสามารถเปลี่ยนชื่อแฟ้มเพื่อบังคับให้ดาวน์โหลดแฟ้มใหม่

ตัวอย่างเช่น ถ้าแฟ้มรุ่น 1 เป็น

<link rel="stylesheet" href="/css/site.css" />

รุ่นที่ 2 ของแฟ้มที่ปรับปรุงแล้วใช่

<link rel="stylesheet" href="/css/site2.css" />

การดําเนินการนี้จะใช้.css site2 บนไคลเอ็นต์

อย่างไรก็ตาม การทําเช่นนี้ด้วยตนเองอาจทําให้เกิดปัญหาและข้อผิดพลาดในการเปลี่ยนเส้นทาง หรือเปลี่ยนชื่อแฟ้มที่มีอยู่จริง

แนบพารามิเตอร์แบบสอบถามกับพาธไฟล์

วิธีการทํางานของเว็บช่วยให้คุณสามารถเพิ่มพารามิเตอร์แบบสอบถามสําหรับคีย์และค่ารวมกันหลังเส้นทาง กลไกการแคชของไคลเอ็นต์รู้จักแฟ้มเป็นแฟ้มที่แยกต่างหากถ้าพารามิเตอร์แบบสอบถามแตกต่างกัน พารามิเตอร์แบบสอบถามเป็น add-on และไม่มีจุดใด ๆ ถ้าไม่มีวัตถุประสงค์

พารามิเตอร์แบบสอบถามสามารถแนบกับเส้นทางในรูปแบบต่อไปนี้:

<!-- クエリパラメータなし -->
<link rel="stylesheet" href="/css/site.css" />

<!-- クエリパラメータあり -->
<link rel="stylesheet" href="/css/site.css?key=value" />

กลไกนี้ต้องการเส้นทางการเปลี่ยนแปลง แต่ไม่จําเป็นต้องเปลี่ยนชื่อแฟ้มที่มีอยู่จริง

เพิ่มพารามิเตอร์แบบสอบถามโดยอัตโนมัติโดยทางโปรแกรม (ตัวอย่างที่ไม่ดี)

โดยการแนบพารามิเตอร์แบบสอบถามโดยอัตโนมัติโดยทางโปรแกรม คุณไม่จําเป็นต้องเปลี่ยนเส้นทางแฟ้มด้วยตนเองแม้ว่าแฟ้มแบบคงที่มีการเปลี่ยนแปลง

ตัวอย่างง่ายๆ คือการเพิ่มเวลาปัจจุบันลงในพารามิเตอร์แบบสอบถามเมื่อผู้ใช้เยี่ยมชมเว็บเพจ นี้เป็นเรื่องง่ายเพราะผมคิดว่าภาษาการเขียนโปรแกรมใด ๆ ที่สามารถเขียนในบรรทัดเดียว ฉันคิดว่าตัวอย่างการสร้างมีลักษณะดังนี้

<link rel="stylesheet" href="/css/site.css?20210223120000" />

อย่างไรก็ตามข้อเสียของการทําเช่นนี้คือแคชไม่ดี เส้นทางจะเปลี่ยนแปลงทุกครั้งที่คุณเยี่ยมชมเว็บเพจ แม้ว่าแฟ้มจะเหมือนกับครั้งสุดท้าย มันถือเป็นไฟล์ที่แยกต่างหากดังนั้นทุกครั้งที่คุณดาวน์โหลดไฟล์ CSS จากเซิร์ฟเวอร์ ไฟล์รุ่นเก่าจะไม่ใช้ แต่เป็นเพียงเช่นเดียวกับการไม่ใช้คุณลักษณะการแคช

ASP.NET เวอร์ชันไฟล์โดยแนบพารามิเตอร์การสอบถามใน Core

แม้ว่าจะไม่มีการ ASP.NET อีกต่อไป แต่แกนหลักเป็นวิธีมาตรฐานในการแก้ปัญหาแคชนี้

สิ่งที่คุณต้องทําคือแนบคุณสมบัติกับแท็กที่ asp-append-version="true" อธิบายเส้นทางของไฟล์ดังนี้:

<link rel="stylesheet" href="~/css/site.css" asp-append-version="true"/>
<img src="/image/sample.png" asp-append-version="true"/>
<script src="~/js/site.js" asp-append-version="true"></script>

หลังจากที่คุณประกาศไปยังเว็บ เมื่อคุณเยี่ยมชมเพจจริง ๆ จะขยายเป็นดังนี้:

<link rel="stylesheet" href="/css/site.css?v=S2ihmzMFFc3FWmBWsR-NiddZWa8kbyaQYBx2FDkIoHs" />
<img src="/image/sample.png?v=Z0tUqQmLt_3L_NSzPmkbZKxL8cMxglf08BwWb5Od5z4" />
<script src="/js/site.js?v=dLGP40S79Xnx6GqUthRF6NWvjvhQ1nOvdVSwaNcgG18"></script>

สตริงแบบสุ่มจะถูกเพิ่ม แต่จะไม่เปลี่ยนแปลงทุกครั้งที่มีการเข้าถึง สตริงนี้เป็นแฮชและสร้างขึ้นจากเนื้อหาของไฟล์อ้างอิง ดังนั้นตราบใดที่เนื้อหาของไฟล์ยังคงเหมือนเดิมพวกเขาสร้างสตริงเดียวกัน ถ้าเนื้อหาของแฟ้มเปลี่ยนแปลง ให้เปลี่ยนเป็นสตริงใหม่

ถ้าแฟ้มเหมือนกัน เส้นทางจะเหมือนกัน ดังนั้นแฟ้มที่เก็บไว้ชั่วคราวจะถูกใช้ก่อน ถ้าแฟ้มได้รับการปรับปรุง เส้นทางจะเปลี่ยนแปลง ดังนั้นแฟ้มใหม่จะถูกดาวน์โหลดและใช้

คุณสมบัตินี้ asp-append-version="true" มักจะประกอบด้วยแฟ้มแบบคงที่ที่วางอยู่ในโฟลเดอร์ wwwroot เท่านั้น โปรดสังเกตว่า สายอักขระแบบสุ่มไม่ขยาย แม้ว่าถูกตั้งค่าเป็นแฟ้มอื่น

เกี่ยวกับโปรแกรมตัวอย่าง

เท็มเพลต.jsเท็มเพลต asp-append-version โครงการเริ่มต้นคือเท็มเพลต site ไม่มี.css asp-append-version แนบอยู่

โปรแกรมตัวอย่าง _Layout.cshtml เพิ่มแฟ้ม.jsไซต์ ไซต์ .css asp-append-version ไซต์ ลงในแต่ละไซต์ นอกจากนี้เรายังเพิ่มแท็ก img เป็นข้อมูลอ้างอิง asp-append-version และเพิ่มลงใน