การโหลดแหล่งข้อมูล JavaScript ขนาดใหญ่ส่งผลต่อความเร็วหน้าเว็บอย่างมาก การแยก JavaScript ออกเป็นส่วนเล็กๆ และดาวน์โหลดเฉพาะสิ่งที่จำเป็นเพื่อให้หน้าเว็บทำงานได้ในระหว่างการเริ่มต้นจะช่วยปรับปรุงการตอบสนองต่อการโหลดของหน้าเว็บได้อย่างมาก ซึ่งจะช่วยปรับปรุงInteraction to Next Paint (INP) ของหน้าเว็บได้ด้วย
ขณะที่หน้าเว็บดาวน์โหลด แยกวิเคราะห์ และคอมไพล์ไฟล์ JavaScript ขนาดใหญ่ หน้าเว็บอาจ ไม่ตอบสนองเป็นระยะเวลาหนึ่ง องค์ประกอบของหน้าเว็บจะปรากฏให้เห็นเนื่องจากเป็นส่วนหนึ่งของ HTML เริ่มต้นของหน้าเว็บและจัดรูปแบบโดย CSS อย่างไรก็ตาม เนื่องจาก JavaScript ที่จำเป็นต่อการขับเคลื่อนองค์ประกอบแบบอินเทอร์แอกทีฟเหล่านั้น รวมถึงสคริปต์อื่นๆ ที่หน้าเว็บโหลด อาจกำลังแยกวิเคราะห์และเรียกใช้ JavaScript เพื่อให้องค์ประกอบเหล่านั้นทำงานได้ ผลลัพธ์คือผู้ใช้อาจรู้สึกว่าการโต้ตอบล่าช้าอย่างมาก หรือแม้กระทั่งใช้งานไม่ได้เลย
ซึ่งมักเกิดขึ้นเนื่องจากเทรดหลักถูกบล็อกเมื่อมีการแยกวิเคราะห์และคอมไพล์ JavaScript ในเทรดหลัก หากกระบวนการนี้นานเกินไป องค์ประกอบแบบอินเทอร์แอกทีฟ ของหน้าเว็บอาจตอบสนองต่ออินพุตของผู้ใช้ได้ไม่เร็วพอ วิธีแก้ไขปัญหานี้อย่างหนึ่ง คือการโหลดเฉพาะ JavaScript ที่คุณต้องการให้หน้าเว็บทํางานได้ ขณะที่ เลื่อนการโหลด JavaScript อื่นๆ ออกไปเป็นภายหลังผ่านเทคนิคที่เรียกว่าการแยกโค้ด โมดูลนี้มุ่งเน้นที่เทคนิคหลังใน 2 เทคนิคนี้
ลดการแยกวิเคราะห์และการดำเนินการ JavaScript ระหว่างการเริ่มต้นผ่านการแยกโค้ด
Lighthouse จะแสดงคำเตือนเมื่อการดำเนินการ JavaScript ใช้เวลานานกว่า 2 วินาที และจะล้มเหลวเมื่อใช้เวลานานกว่า 3.5 วินาที การแยกวิเคราะห์และการเรียกใช้ JavaScript มากเกินไปอาจเป็นปัญหาได้ทุกจุดในวงจร ของหน้าเว็บ เนื่องจากอาจเพิ่มความล่าช้าในการป้อนข้อมูลของการโต้ตอบ หากเวลาที่ผู้ใช้โต้ตอบกับหน้าเว็บตรงกับช่วงเวลาที่ งานในเทรดหลักซึ่งรับผิดชอบในการประมวลผลและเรียกใช้ JavaScript กำลังทำงานอยู่
นอกจากนี้ การเรียกใช้และการแยกวิเคราะห์ JavaScript มากเกินไปยังเป็นปัญหาอย่างยิ่ง ในระหว่างการโหลดหน้าเว็บครั้งแรก เนื่องจากเป็นจุดในวงจร ของหน้าเว็บที่ผู้ใช้มีแนวโน้มที่จะโต้ตอบกับหน้าเว็บ ในความเป็นจริงแล้ว Total Blocking Time (TBT) ซึ่งเป็นเมตริกการตอบสนองต่อการโหลดมีความสัมพันธ์กันอย่างมากกับ INP ซึ่งแสดงให้เห็นว่าผู้ใช้มีแนวโน้มสูงที่จะพยายามโต้ตอบระหว่างการโหลดหน้าเว็บครั้งแรก
การตรวจสอบ Lighthouse ที่รายงานเวลาที่ใช้ในการเรียกใช้ไฟล์ JavaScript แต่ละไฟล์ ที่หน้าเว็บของคุณขอมีประโยชน์เนื่องจากช่วยให้คุณระบุสคริปต์ที่อาจเป็นตัวเลือกสำหรับการแยกโค้ดได้อย่างแม่นยำ จากนั้นคุณสามารถดำเนินการต่อได้โดยใช้เครื่องมือครอบคลุมในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อระบุส่วนของ JavaScript ในหน้าเว็บที่ไม่ได้ใช้ในระหว่างการโหลดหน้าเว็บ
การแยกโค้ดเป็นเทคนิคที่มีประโยชน์ซึ่งช่วยลดเพย์โหลด JavaScript เริ่มต้นของหน้าเว็บได้ ซึ่งช่วยให้คุณแยกแพ็กเกจ JavaScript ออกเป็น 2 ส่วนได้ ดังนี้
- JavaScript ที่จำเป็นต้องใช้เมื่อโหลดหน้าเว็บ จึงไม่สามารถโหลดในเวลาอื่นได้
- JavaScript ที่เหลือซึ่งโหลดได้ในภายหลัง มักจะโหลดเมื่อผู้ใช้โต้ตอบกับองค์ประกอบแบบอินเทอร์แอกทีฟที่เฉพาะเจาะจงในหน้าเว็บ
คุณสามารถแยกโค้ดได้โดยใช้ไวยากรณ์ไดนามิก import() ไวยากรณ์นี้แตกต่างจากองค์ประกอบ