ปกติแล้วการเขียนเว็บไซต์โดยการใช้ React ย่อมมีการ set route ไปยัง component ต่าง ๆ ที่อยู่ในไฟล์อื่น และในขณะเดียวกัน ในแต่ละ component ก็อาจจะมีการเรียกใช้ component หรือ library ต่าง ๆ มากขึ้น ส่งผลให้เมื่อ app มีขนาดใหญ่ เว็บของเราจะโหลดช้า การ code-splitting จึงเข้ามามีส่วนช่วยในเรื่องนี้
React.lazy เป็นหนึ่งในวิธีการ code-splitting สำหรับผู้ที่ใช้ framework อย่าง React, Next.js, Gasby หรือ framework อื่น ๆ ที่มีการใช้ webpack ในแอปอยู่แล้ว
แนวคิดของ React.lazy คือ แทนที่จะ import ทุกอย่างเข้ามารวดเดียวตอนโหลดเว็บไซต์ ก็เปลี่ยนให้มีการ import component เมื่อต้องการใช้ component นั้น ๆ เท่านั้น ซึ่งเมื่อผู้เขียนบทความได้นำ React.lazy มาใช้แทนการ import แบบปกติ จะทำให้ความเร็วในการโหลดหน้าเว็บไซต์เร็วขึ้นถึงประมาณ 30% เลยทีเดียว
วิธีการใช้งาน React.lazy ก็ง่าย ๆ อย่างแรกคือ import library เข้ามา
จากนั้นเปลี่ยนการ import component ที่ใช้จาก
เป็น
จากนั้น เมื่อเรียกใช้ Component นั้น ๆ ก็ทำการครอบด้วย Suspent เพื่อโชว์คอนเทนต์ระหว่างที่รอโหลดหน้าเว็บ เพื่อไม่ให้ผู้ใช้รู้สึกสับสนว่ากำลังโหลดหน้าเว็บอยู่หรือไม่
สำหรับผู้ที่ใช้ route ในการเปลี่ยน path เว็บไซต์ก็สามารถใช้ Suspent ครอบ Switch ได้เลย ดังโค้ดด้านล่าง
ผู้เขียน เธียรวิชญ์ สิริสาครสกุล
วันที่ 1 ตุลาคม พ.ศ. 2564