จัดเตรียม Local JS และ CSS Resources สำหรับ CDN Fallbacks

ระบุว่า

• CDN เป็นสิ่งที่ดีเพราะพวกเขาสามารถให้บริการทรัพยากรใกล้ชิดกับไคลเอนต์ลูกค้าสามารถแคชพวกเขาและคุณสามารถลดภาระบนเซิร์ฟเวอร์ของคุณเอง
• ในเบราว์เซอร์ที่ผ่านมาทรัพยากรโหลดจากเซิร์ฟเวอร์ของบุคคลที่สามไม่ได้ลดลงขอบคุณรักษาความปลอดภัยเพื่อSubresource Integrity (SRI)
• CDNs อาจจะลดลงหรือถูกปิดกั้นในบางประเทศและไม่สามารถใช้ได้เมื่อมีการพัฒนาแบบออฟไลน์1

ฉันคิดว่ามันน่าสนใจที่จะใช้ CDN แต่ก็พร้อมที่จะให้พวกเขาใช้งานไม่ได้ โพสต์บล็อกนี้ให้คำแนะนำที่ดีเกี่ยวกับวิธีการต่างๆ หากคุณดูตัวอย่างพื้นฐานคุณจะเห็นว่ามันมีโค้ดสำเร็จรูปจำนวนเล็กน้อยอยู่แล้วเพื่อจัดเตรียมทางเลือกสำหรับ jQuery และ Bootstrap ในขณะที่โซลูชันที่ได้รับความนิยมแนะนำให้ใช้Fallback.jsซึ่งดูเหมือนจะไม่มีการเปลี่ยนแปลงในปีที่ผ่านมา . ในทำนองเดียวกันคำถาม SO ที่เกี่ยวข้องมากที่สุดสำหรับหัวข้อเป็นเพียงการให้ทางเลือกสำหรับ jQuery

อย่างไรก็ตามในโครงการโลกแห่งความเป็นจริงฉันคาดหวังว่าจะมีทรัพยากร js / css 5 รายการขึ้นไปดังนั้นฉันรู้สึกว่าคุณไม่จำเป็นต้องทำซ้ำแผ่นบาง ๆ ที่ยุ่งเหยิงเพื่อมอบทางเลือกทั้งหมด นอกจากนี้ทุกครั้งที่คุณเพิ่มหรืออัปเดตทรัพยากรคุณจะต้อง

• อัปเดตลิงค์ CDN
• อัพเดตสำเนา fallback โลคัลโดยดาวน์โหลดด้วยตนเองหรือเปลี่ยนเวอร์ชันในการกำหนดค่า npm / bower
• อัปเดตลิงก์ไปที่ทางเลือก
• อัปเดตแฮช SRI

ในขณะที่ในอุดมคติของโลกฉันคาดว่าจะเพิ่ม / อัปเดตทรัพยากรในไฟล์การกำหนดค่าหนึ่งไฟล์และให้ขั้นตอนอื่นทั้งหมดดำเนินการโดยอัตโนมัติ

มีเวิร์กโฟลว์ที่กำหนดไว้แล้วเพื่อให้บรรลุเป้าหมายนี้หรือไม่?

หรือ CDNs และโดยเฉพาะอย่างยิ่ง SRI ยังเร็วเกินไป?

หรือคนส่วนใหญ่ไม่สนใจที่จะให้ทางเลือกอื่นสำหรับทรัพยากร CDN หรือไม่?

_{1. ถึงแม้ว่าคุณจะมีรุ่น dev ที่ไม่ได้พึ่งพา CDN แต่ฉันก็คิดว่ารูปแบบทางเลือกเนื่องจากมันต้องได้รับการบำรุงรักษาด้วย}

ฉันคิดว่าคุณอาจเข้าใจผิดว่าไซต์ที่มีขนาดใหญ่ขึ้นซึ่งอาจต้องการความยืดหยุ่นเช่นนี้ใช้ CDN

มันไม่ใช่แค่เรื่องของการโฮสต์ jQuery หรือรูปภาพบางรูป ไซต์ส่วนใหญ่จะโฮสต์บน CDN โดยมีเพียงสิ่งที่สร้างขึ้นแบบไดนามิกเช่นหน้าการชำระเงินหรือตะกร้าช้อปปิ้งที่โฮสต์อยู่ใน 'webfarm หลัก'

แม้แต่สิ่งเหล่านี้ก็ยังมีการเคลื่อนไหวมากขึ้นเรื่อย ๆ เพื่อการประมวลผลแบบโลคอลด้วย JS และคุกกี้เพื่อแสดงข้อมูลเฉพาะของผู้ใช้โดยไม่ต้องกดปุ่มการประมวลผลด้านเซิร์ฟเวอร์

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

เว็บไซต์ที่ฉันทำงานกับ CDN ของเรามีความสำคัญต่อเว็บไซต์มากขึ้นเรื่อย ๆ ในการเริ่มต้นเราเพียงแค่ใช้มันเพื่อแคชรูปภาพ / CSS / JS ในขั้นตอนนี้เรามีคุณสมบัติการกำหนดค่าที่เขียนชื่อโฮสต์ของทรัพยากรเหล่านี้ใหม่จาก www.mysite.com/ เป็น www.cdn.com/ ดังนั้นหาก CDN ลงไปเราก็สามารถเปลี่ยนค่าโฮสต์นี้หรือปิดโดยสิ้นเชิงแล้วปล่อยทิ้งไว้ URL ที่ชี้ไปยังเว็บเซิร์ฟเวอร์ของเรา

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

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

ฉันเห็น 3 เหตุผลสำคัญมากสำหรับการใช้ CDNs:

1. ลดเวลาแฝงของเครือข่ายสำหรับผู้ใช้ในพื้นที่ห่างไกล เมื่อคุณมีเว็บไซต์สำหรับผู้ชมทั่วโลกโฮสติ้งของคุณในอเมริกาเหนือจะดูเหมือนไม่รวดเร็วสำหรับผู้ใช้ในเอเชียใต้โดยเฉพาะในจีน ความแตกต่างของประสบการณ์การใช้งานของผู้ใช้อาจมีขนาดใหญ่มากซึ่งจะเป็นการกีดกันผู้ใช้จากการใช้เว็บไซต์ของคุณ ในกรณีนี้ CDN หลายภูมิภาคจะมีความสำคัญต่อธุรกิจของคุณ

2. ให้บริการมากที่สุดจากทรัพยากรที่มีอยู่สูง ความน่าเชื่อถือเป็นหนึ่งในสาเหตุหลักของการใช้คลาวด์ CDNs การรับส่งข้อมูลจะถูกเปลี่ยนเส้นทางไปยังโหนดที่มีอยู่โดยอัตโนมัติและคุณสามารถเพิ่มมาตรการพิเศษเพื่อเปลี่ยนเส้นทางการรับส่งข้อมูลหากภูมิภาคคลาวด์ทั้งหมดไม่ทำงาน

3. CDN ง่ายต่อการบำรุงรักษาและราคาถูกกว่าแอพพลิเคชันเซิร์ฟเวอร์ที่ให้บริการเนื้อหาแบบไดนามิก เมื่อคุณต้องจัดการกับปัญหาที่กล่าวถึงข้างต้นมันเป็นวิธีที่เป็นธรรมชาติในการประหยัดเงิน

ทั้งหมดนี้หมายความว่าเป้าหมายของ CDN คือการเพิ่มความพร้อมใช้งานของเนื้อหาให้กับผู้ใช้ปลายทาง หาก CDN ล้มเหลวหรือช้าลงด้วยเหตุผลบางประการทางเลือกฝั่งไคลเอ็นต์จะเพิ่มการโหลดหน้าเว็บอย่างมากเนื่องจากจะพยายามเรียกใช้ทรัพยากรที่ไม่สามารถเข้าถึงได้ก่อน ทางออกที่ดีกว่าคือการออกแบบฝั่งเซิร์ฟเวอร์ซึ่งจะทำการทดแทน URL พื้นฐานในลิงก์เช่น "{CDN} /js/jquery-version-min.js" วิธีนี้จะทำให้สามารถกำหนดเส้นทางการรับส่งข้อมูลไปยังเซิร์ฟเวอร์แอปพลิเคชันแทน CDN หากการตรวจสุขภาพ CDN ล้มเหลว - ลูกค้าจะไม่ดำเนินการตามคำขอที่ไม่จำเป็นและจะไปยังเซิร์ฟเวอร์แอปโดยตรงซึ่งจะเป็นทางเลือกของคุณ สิ่งนี้จะช่วยแก้ปัญหาการปรับใช้ในพื้นที่และการแสดงละคร