การกำหนดค่าลักษณะการแคช HTTP

Jeff Posnick

โค้ดแล็บนี้แสดงวิธีเปลี่ยนส่วนหัวการแคช HTTP ที่เว็บเซิร์ฟเวอร์ที่ใช้ Node.js ส่งคืน ซึ่งเรียกใช้เฟรมเวิร์กการแสดงผล Express นอกจากนี้ เครื่องมือนี้ยังแสดงวิธียืนยันว่าระบบใช้ลักษณะการแคชที่คุณคาดหวังอยู่จริง โดยใช้แผงเครือข่ายในเครื่องมือสำหรับนักพัฒนาเว็บของ Chrome

ทำความคุ้นเคยกับโปรเจ็กต์ตัวอย่าง

ไฟล์หลักที่คุณจะใช้ในโปรเจ็กต์ตัวอย่างมีดังนี้

  • server.js มีโค้ด Node.js ที่แสดงเนื้อหาของเว็บแอป โดยจะใช้ Express เพื่อจัดการคำขอและคำตอบ HTTP โดยเฉพาะอย่างยิ่ง express.static() ใช้เพื่อแสดงไฟล์ทั้งหมดในเครื่องในไดเรกทอรีสาธารณะ ดังนั้นเอกสารประกอบของ serve-static จะมีประโยชน์
  • public/index.html คือ HTML ของเว็บแอป ไฟล์นี้ไม่มีข้อมูลเวอร์ชันเป็นส่วนหนึ่งของ URL เช่นเดียวกับไฟล์ HTML ส่วนใหญ่
  • public/app.15261a07.js และ public/style.391484cf.css คือชิ้นงาน JavaScript และ CSS ของเว็บแอป ไฟล์เหล่านี้แต่ละไฟล์จะมีแฮชใน URL ซึ่งสอดคล้องกับเนื้อหาของไฟล์ index.html มีหน้าที่ติดตาม URL เวอร์ชันที่เฉพาะเจาะจงที่จะโหลด

กำหนดค่าส่วนหัวการแคชสำหรับ HTML

เมื่อตอบกลับคำขอ URL ที่ไม่มีข้อมูลเวอร์ชัน โปรดตรวจสอบว่าคุณได้เพิ่ม Cache-Control: no-cache ลงในข้อความตอบกลับ นอกจากนี้ เราขอแนะนําให้ตั้งค่าส่วนหัวการตอบกลับเพิ่มเติม 1 ใน 2 รายการต่อไปนี้ Last-Modified หรือ ETag index.html จัดอยู่ในหมวดหมู่นี้ คุณแบ่งขั้นตอนนี้ออกเป็น 2 ขั้นตอนได้

ขั้นแรก ส่วนหัว Last-Modified และ ETag จะควบคุมโดยตัวเลือกการกำหนดค่า etag และ lastModified ตัวเลือกทั้ง 2 รายการนี้มีค่าเริ่มต้นเป็น true สําหรับคําตอบ HTTP ทั้งหมด ดังนั้นในการตั้งค่าปัจจุบันนี้ คุณไม่จําเป็นต้องเลือกใช้เพื่อให้ได้ผลลัพธ์ดังกล่าว แต่คุณก็ระบุค่าได้อย่างชัดเจนในการกําหนดค่า

ประการที่ 2 คุณต้องเพิ่มส่วนหัว Cache-Control: no-cache ได้ แต่สำหรับเอกสาร HTML เท่านั้น (ในกรณีนี้คือ index.html) วิธีที่ง่ายที่สุดในการตั้งค่าส่วนหัวนี้แบบมีเงื่อนไขคือการเขียน setHeaders function ที่กำหนดเอง และตรวจสอบในนั้นว่าคำขอขาเข้าเป็นคำขอสำหรับเอกสาร HTML หรือไม่

  • คลิกรีมิกซ์เพื่อแก้ไขเพื่อให้โปรเจ็กต์แก้ไขได้

การกําหนดค่าการแสดงผลแบบคงที่ใน server.js เริ่มต้นดังนี้

app.use(express.static('public'));
  • ทำการเปลี่ยนแปลงตามที่อธิบายไว้ข้างต้น แล้วคุณควรได้ผลลัพธ์ที่มีลักษณะดังนี้
app.use(express.static('public', {
  etag: true, // Just being explicit about the default.
  lastModified: true,  // Just being explicit about the default.
  setHeaders: (res, path) => {
    if (path.endsWith('.html')) {
      // All of the project's HTML files end in .html
      res.setHeader('Cache-Control', 'no-cache');
    }
  },
}));

กำหนดค่าส่วนหัวการแคชสำหรับ URL ที่มีเวอร์ชัน

เมื่อตอบกลับคำขอ URL ที่มี "ลายนิ้วมือ" หรือข้อมูลเวอร์ชัน และเนื้อหาที่ไม่ได้มีไว้เพื่อเปลี่ยนแปลง ให้เพิ่ม Cache-Control: max-age=31536000 ในการตอบกลับ app.15261a07.js และ style.391484cf.css อยู่ในหมวดหมู่นี้

จาก setHeaders function ที่ใช้ในขั้นตอนสุดท้าย คุณสามารถเพิ่มตรรกะเพิ่มเติมเพื่อตรวจสอบว่าคําขอหนึ่งๆ นั้นเป็นคําขอ URL เวอร์ชันหรือไม่ และหากใช่ ให้เพิ่มส่วนหัว Cache-Control: max-age=31536000

วิธีที่ดีที่สุดในการทำเช่นนี้คือการใช้นิพจน์ทั่วไปเพื่อดูว่าเนื้อหาที่ขอนั้นตรงกับรูปแบบที่เฉพาะเจาะจงซึ่งคุณทราบว่าแฮชนั้นอยู่หรือไม่ ในกรณีของโปรเจ็กต์ตัวอย่างนี้ จะเป็นอักขระ 8 ตัวจากชุดตัวเลข 0-9 และตัวอักษรพิมพ์เล็ก a-f (เช่น อักขระฐานสิบหก) เสมอ โดยแฮชจะคั่นด้วยอักขระ . เสมอ

นิพจน์ทั่วไปที่ตรงกับกฎทั่วไปเหล่านั้นจะเขียนได้ดังนี้ new RegExp('\\.[0-9a-f]{8}\\.')

  • แก้ไขฟังก์ชัน setHeaders ให้มีลักษณะดังนี้
app.use(express.static('public', {
  etag: true, // Just being explicit about the default.
  lastModified: true,  // Just being explicit about the default.
  setHeaders: (res, path) => {
    const hashRegExp = new RegExp('\\.[0-9a-f]{8}\\.');

    if (path.endsWith('.html')) {
      // All of the project's HTML files end in .html
      res.setHeader('Cache-Control', 'no-cache');
    } else if (hashRegExp.test(path)) {
      // If the RegExp matched, then we have a versioned URL.
      res.setHeader('Cache-Control', 'max-age=31536000');
    }
  },
}));

ยืนยันลักษณะการทำงานใหม่โดยใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์

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

  • หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ เต็มหน้าจอ

  • ปรับแต่งคอลัมน์ที่แสดงในแผงเครือข่ายให้รวมข้อมูลที่ตรงที่สุดโดยคลิกขวาที่ส่วนหัวของคอลัมน์

การกำหนดค่าแผงเครือข่ายของ DevTools

คอลัมน์ที่ต้องให้ความสนใจคือ Name, Status, Cache-Control, ETag และ Last-Modified

  • เมื่อเครื่องมือสำหรับนักพัฒนาเว็บเปิดอยู่ในแผงเครือข่าย ให้รีเฟรชหน้าเว็บ

หลังจากหน้าเว็บโหลดแล้ว คุณควรเห็นรายการในแผงเครือข่ายที่มีลักษณะดังต่อไปนี้

คอลัมน์แผงเครือข่าย

แถวแรกมีไว้สำหรับเอกสาร HTML ที่คุณไปยัง รายการนี้แสดงอย่างถูกต้องพร้อมกับ Cache-Control: no-cache สถานะการตอบกลับ HTTP สําหรับคําขอนั้นคือ 304 ซึ่งหมายความว่าเบราว์เซอร์รู้ว่าไม่ควรใช้ HTML ที่แคชไว้ทันที แต่ส่งคําขอ HTTP ไปยังเว็บเซิร์ฟเวอร์แทน โดยใช้ข้อมูล Last-Modified และ ETag เพื่อดูว่ามีการอัปเดต HTML ที่มีอยู่ในแคชหรือไม่ การตอบกลับ HTTP 304 บ่งบอกว่าไม่มี HTML ที่อัปเดต

2 แถวถัดไปมีไว้สำหรับชิ้นงาน JavaScript และ CSS ที่มีเวอร์ชัน คุณควรเห็นว่าหน้าเว็บแสดงด้วย Cache-Control: max-age=31536000 และสถานะ HTTP ของหน้าเว็บแต่ละหน้าคือ 200 เนื่องจากการกําหนดค่าที่ใช้ ไม่มีคําขอจริงที่ส่งไปยังเซิร์ฟเวอร์ Node.js และการคลิกรายการจะแสดงรายละเอียดเพิ่มเติม รวมถึงการตอบกลับที่มาจาก "(จากแคชดิสก์)"

สถานะการตอบกลับของเครือข่ายเป็น 200

ค่าจริงของคอลัมน์ ETag และ Last-Modified นั้นไม่สำคัญมากนัก สิ่งที่สําคัญคือต้องยืนยันว่ามีการตั้งค่า

สรุป

เมื่อทำตามขั้นตอนในโค้ดแล็บนี้แล้ว คุณก็จะคุ้นเคยกับวิธีกำหนดค่าส่วนหัวคำตอบ HTTP ในเว็บเซิร์ฟเวอร์ที่ใช้ Node.js โดยใช้ Express เพื่อใช้แคช HTTP ได้อย่างมีประสิทธิภาพสูงสุด นอกจากนี้ คุณยังมีขั้นตอนที่ต้องทําเพื่อยืนยันว่ามีการใช้ลักษณะการแคชตามที่คาดไว้ผ่านแผงเครือข่ายในเครื่องมือสําหรับนักพัฒนาเว็บของ Chrome