JavaScript: & css CDN

ถ้าทำเว็บในสมัยนี้เป็นไปได้ที่จะมีการใช้ Javascript Web Frameworks ที่นิยม เช่น Angular, Express.js, jQuery, React, Svelte, Vue.js และ css Frameworks เช่น Bootstrap, Bulma, Foundation, Milligram, Skeleton, Tailwind, UIkit มาช่วยในการทำงาน ให้เป็นระบบ และระเบียบ มากขึ้น เว็บที่ไหน ๆ ก็ใช้ ทำให้เปลี่ยนไปใช้จาก CDN เป็นอะไรที่น่าทำมาก ๆ

เหตุผล ที่ควรใช้ CDN

1. ลด Network Traffic ของเว็บเรา เพราะว่า ถ้าเช่า host / VPS ทุกครั้งที่มีการโหลด css / Javascript จะมีการนับปริมาณการใช้ทุกไฟล์ที่ เรียกใช้อยู่แล้ว ให้ไปโหลดจาก CDN หรือ Cloudflare ก็จะประหยัดไปได้เยอะ แถมลดที่เก็บไฟล์พวกนี้ ลดการใช้ cpu ในการส่งไฟล์เดิม ๆ
2. เว็บเราจะเร็วขึ้น
   • เป็นเพราะโดยปกติ Browser อย่าง chrome จะมีการ limit จำนวนการ โหลดไฟล์จากที่เดียวกัน เช่น host 1 จะสามารถโหลดได้พร้อมกัน 10 ไฟล์ และ host 2 จะโหลดไปพร้อม ๆ กัน อีก 10 ไฟล์ ( แปลว่า ถ้ามี 2 host จะโหลดได้เร็วกว่ามี host เดียว )
   • ไม่ต้องโหลดไฟล์ใหม่ เพราะว่าไฟล์อย่าง Bootstrap version นี้ อาจจะเคยโดนเรียกในเว็บไซต์อื่น ๆ มาแล้ว ไม่ต้องโหลดมาอีก ใช้ได้เลย
3. เน็ตบริษัท เน็ตโดยรวมจะเร็วขึ้น เพราะไม่ต้องโหลดไฟล์ ซ้ำ ๆ กัน
4. มันบริการ free เพราะว่ามันลดการใช้งาน network ทั่วโลกได้ 13% เลยทีเดียว win win ทั้งคู่

ตัวอย่างการใช้ CDN

1. ค้นหา เว็บที่ให้บริการ CDN อย่าง https://cdnjs.com ที่ทำงานโดยอยู่บน เครือข่าย https://www.cloudflare.com
2. ค้นหา Freamwork ที่จะใช้ เช่น https://cdnjs.com/libraries/bootstrap จะเห็นว่ามี หลายไฟล์มาก เลือกไฟล์ที่เรา จะใช้ คลิก ที่ </> นำไปวางใน code ที่เรียกใช้ เช่น

<link crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css"
      integrity="sha512-jnSuA4Ss2PkkikSOLtYs8BlYIeeIK1h99ty4YfvRPAlzr377vr3CXDb7sb7eEEBYjDtcYj+AjBH3FLv5uSJuXg=="
      referrerpolicy="no-referrer" rel="stylesheet">

<script crossorigin="anonymous"
      integrity="sha512-ykZ1QQr0Jy/4ZkvKuqWn4iF3lqPZyij9iRv6sGqLRdTPkY69YX6+7wvVGmsdBbiIfN/8OdsI7HABjvEok6ZopQ=="
      referrerpolicy="no-referrer"
      src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"></script>

จะสังเกตุว่า จะมี Attribute เพิ่มขึ้นมา คือ

• crossorigin เป็นการให้ทำงาน ข้าม host ได้
• integrity เป็น hash ที่ช่วยให้ แน่ใจว่าเป็นไฟล์ที่ถูกต้อง ไม่ปลอมปน ถูกไฟล์แน่นะวิ
• referrerpolicy หลัก ๆ คือ บอก google ว่าไม่ต้องตามไปดูไฟล์พวกนี้นะ