JavaScript ซ้ำ

Connor Clark
Connor Clark

เผยแพร่: 8 ต.ค. 2025

นำโมดูล JavaScript ขนาดใหญ่ที่ซ้ำกันออกจากแพ็กเกจเพื่อลดจำนวนไบต์ที่ไม่จำเป็นที่กิจกรรมเครือข่ายใช้

วิธีส่งต่อข้อมูลเชิงลึกนี้

  • สำหรับหน้าเว็บที่มี JavaScript หลายชุด ให้แยกโค้ดการอ้างอิงขนาดใหญ่ที่หลายชุดต้องการไปยังชุดทั่วไป
  • ใน JavaScript Bundle แต่ละรายการ ให้ตรวจสอบว่ามีทรัพยากร Dependency ขนาดใหญ่เพียงเวอร์ชันเดียว

คุณเจาะลึกเกี่ยวกับ JavaScript Bundle ในหน้าเว็บได้โดยคลิก View Treemap ซึ่งจะเปิดกลุ่มของหน้าในแผนที่ต้นไม้ของ Lighthouse

แผนภูมิทรีแม็ปของ Lighthouse โหนดสีแสดงโมดูลที่ซ้ำกันซึ่งพบใน JavaScript หลายๆ ชุด
แผนภูมิทรีแม็ปของ Lighthouse โหนดสีแสดงถึงโมดูลที่ซ้ำกันซึ่งพบใน JavaScript หลายๆ ชุด
  • ใน PageSpeed Insights และในรายงาน Lighthouse ปุ่มนี้จะอยู่ในหมวดหมู่ประสิทธิภาพใต้เมตริก

    ปุ่มแผนภูมิทรีแม็ปของมุมมอง Lighthouse
    ปุ่ม "ดูแผนผังต้นไม้" ของ Lighthouse
  • ในแผงประสิทธิภาพของเครื่องมือสำหรับนักพัฒนาเว็บ ปุ่มนี้จะอยู่ในข้อมูลเชิงลึกJavaScript ที่ซ้ำกัน

    ปุ่มดูแผนผังแบบต้นไม้ของแผงประสิทธิภาพในเครื่องมือสำหรับนักพัฒนาเว็บ
    ปุ่ม "ดูแผนผังต้นไม้" ในแผงประสิทธิภาพของ DevTools

คำแนะนำเฉพาะสำหรับกองซ้อน

สร้างจุดแรกเข้าเพิ่มเติมสำหรับทรัพยากร Dependency ขนาดใหญ่ที่ใช้กันทั่วไป และเปิดใช้ฟีเจอร์การแยกโค้ดของ Bundler JavaScript สำหรับรายการต่อไปนี้

ข้อมูลอ้างอิงเพิ่มเติม