การโหลดสคริปต์ของบุคคลที่สามที่มีประสิทธิภาพ

การโหลดสคริปต์ของบุคคลที่สามที่มีประสิทธิภาพ

ในกรณีส่วนใหญ่ สคริปต์ของบุคคลที่สามถือเป็นสคริปต์รอง ก่อนอื่นเราต้องบูตสแตรปและทำให้แอปของเราทำงานก่อนสคริปต์ของบุคคลที่สามเนื่องจาก

เรื่องประสิทธิภาพ

แน่นอนว่าตัวเลือกแรกคือ
การใช้แอตทริบิวต์ "async" หรือ "defer" บนแท็ก ‹script›

นี่เป็นเรื่องปกติสำหรับหนึ่งหรือสองสคริปต์ แต่ถ้าคุณมี
1. เครื่องมือวิเคราะห์หลายรายการ 📈
2. สคริปต์การรวมการชำระเงิน เช่น Chargebee 🤑
3. เครื่องมือบันทึกข้อผิดพลาด เช่น Sentry io ⚠️
4. แชทบอท เช่น Hubspot Chat 💬
5. เครื่องมืออัปเดตผลิตภัณฑ์ เช่น Beamer 🆕
6. และอาจจะมากกว่านั้นเหมือนที่เรามีในองค์กรก่อนหน้าของเรา

อะซิงก์และการเลื่อนทำงานได้ดี แต่สคริปต์ที่กล่าวถึงข้างต้นนำไปสู่การร้องขอ
1. สคริปต์อื่น
2. การเรียก XHR
3. สไตล์ชีท

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

แล้วเราจะทำอะไรได้บ้าง:

• ลบออกหากไม่เพิ่มมูลค่าที่ชัดเจนให้กับไซต์ของคุณ (ซึ่งไม่ใช่ตัวเลือกเสมอไป)
• ปรับกระบวนการโหลดให้เหมาะสม (มาลองสิ่งนี้กัน)

สิ่งแรกที่เราควรโหลดสคริปต์เป็นส่วนหนึ่งของแอป React/Angular ของเรา ไม่ใช่ส่วนหนึ่งของ index.html เนื่องจากจาวาสคริปต์ช่วยให้เราควบคุมการโหลดได้มากกว่า HTML

นี่คือเวอร์ชัน React ของโซลูชัน ThirdPartyLoadingComponent

ดังนั้นฟังก์ชัน loadScript จึงอธิบายได้ในตัว เราจึงลองใช้เวทย์มนตร์ด้านล่าง:

    if ('scheduler' in window) {
      window.scheduler?.postTask(loadScript, { priority: 'background', delay });
    } else if ('requestIdleCallback' in window) {
        setTimeout(() => {
          requestIdleCallback(loadScript)…