ลดเพย์โหลด JavaScript ด้วยการแยกโค้ด

Houssein Djirdeh

Jeremy Wagner

ไม่มีใครชอบการรอ ผู้ใช้กว่า 50% ออกจากเว็บไซต์หากใช้เวลาโหลดนานกว่า 3 วินาที

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

เหตุใดการแยกโค้ดจึงมีประโยชน์

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

สําหรับ Core Web Vitals การลดเพย์โหลด JavaScript ที่ดาวน์โหลดเมื่อเริ่มต้นจะช่วยปรับปรุงเวลา Interaction to Next Paint (INP) ให้ดีขึ้น เหตุผลที่อยู่เบื้องหลังคือ เมื่อทำให้เทรดหลักว่างมากขึ้น แอปพลิเคชันจะตอบสนองต่อข้อมูลจากผู้ใช้ได้เร็วขึ้นโดยลดค่าใช้จ่ายในการเริ่มต้นเกี่ยวกับการแยกวิเคราะห์ คอมไพล์ และการดำเนินการเกี่ยวกับ JavaScript

การลดขนาดของเพย์โหลด JavaScript ที่รับผิดชอบการแสดงผลมาร์กอัปอาจช่วยปรับปรุงเวลา Largest Contentful Paint (LCP) ได้ ทั้งนี้ขึ้นอยู่กับสถาปัตยกรรมของเว็บไซต์ โดยเฉพาะอย่างยิ่งหากเว็บไซต์ของคุณใช้การแสดงผลฝั่งไคลเอ็นต์เป็นหลัก ข้อผิดพลาดนี้อาจเกิดขึ้นเมื่อเบราว์เซอร์ค้นพบทรัพยากร LCP ล่าช้า จนกว่ามาร์กอัปฝั่งไคลเอ็นต์จะเสร็จสมบูรณ์ หรือเมื่อเทรดหลักไม่ว่างเกินกว่าที่จะแสดงผลองค์ประกอบ LCP ดังกล่าว ทั้งสองสถานการณ์อาจทำให้ LCP ของหน้าเว็บล่าช้า

วัดระยะทาง

Lighthouse จะแสดงการตรวจสอบไม่ผ่านเมื่อใช้เวลานานมากในการเรียกใช้ JavaScript ทั้งหมดในหน้าเว็บ

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

Module Bundler ที่ได้รับความนิยม เช่น webpack, Parcel และ Rollup ช่วยให้คุณแยกกลุ่มโดยใช้การนําเข้าแบบไดนามิกได้ ลองพิจารณาข้อมูลโค้ดต่อไปนี้ซึ่งแสดงตัวอย่างเมธอด someFunction ที่จะเริ่มทำงานเมื่อมีการส่งแบบฟอร์ม

import moduleA from "library";

form.addEventListener("submit", e => {
  e.preventDefault();
  someFunction();
});

const someFunction = () => {
  // uses moduleA
}

ในส่วนนี้ someFunction ใช้โมดูลที่นําเข้าจากไลบรารีหนึ่งๆ หากไม่มีการใช้โมดูลนี้ที่อื่น คุณสามารถแก้ไขบล็อกโค้ดเพื่อใช้การนําเข้าแบบไดนามิกเพื่อดึงข้อมูลได้เฉพาะเมื่อผู้ใช้ส่งแบบฟอร์มเท่านั้น

form.addEventListener("submit", e => {
  e.preventDefault();
  import('library.moduleA')
    .then(module => module.default) // using the default export
    .then(() => someFunction())
    .catch(handleError());
});

const someFunction = () => {
    // uses moduleA
}

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

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

การแยกตามระดับเส้นทางหรือคอมโพเนนต์เมื่อใช้เฟรมเวิร์กฝั่งไคลเอ็นต์เป็นแนวทางที่ง่ายกว่าในการโหลดแบบเลื่อนเวลาบางส่วนของแอปพลิเคชัน เฟรมเวิร์กยอดนิยมหลายรายการที่ใช้ webpack มีแนวคิดนามธรรมที่ทําให้การโหลดแบบเลื่อนเวลาทำงานง่ายขึ้นกว่าการเจาะลึกการกําหนดค่าด้วยตนเอง