React.lazy เป็นวิธีที่ยอดเยี่ยมในการโหลดคอมโพเนนต์ตามความต้องการและปรับปรุงประสิทธิภาพของแอปของคุณ อย่างไรก็ตาม บางครั้งมันอาจนำไปสู่ปัญหาอย่าง "ChunkLoadError" และ "Loading chunk failed"
ทุกวันนี้ การพัฒนาซอฟต์แวร์กำลังเคลื่อนที่อย่างรวดเร็วภายใต้ปรัชญา "move fast and break things" ที่เป็นที่นิยม ไม่มีการตัดสินใด ๆ ที่นี่ - มันเป็นวิธีที่มันเป็น อย่างไรก็ตาม จังหวะที่รวดเร็วนี้บางครั้งอาจนำไปสู่ปัญหา โดยเฉพาะเมื่อพูดถึงการโหลดคอมโพเนนต์ใน React
หากคุณกำลังทำงานในโครงการที่ใช้ React.lazy เพื่อโหลดคอมโพเนนต์ตามความต้องการ คุณอาจพบปัญหาเช่น ChunkLoadError และ Loading chunk failed นี่คือเหตุผลที่เป็นไปได้บางประการ:
โดยปกติ การรีเฟรชหน้าจออย่างง่ายสามารถแก้ปัญหาได้ แต่ไม่ใช่ประสบการณ์ที่ดีสำหรับผู้ใช้ ลองนึกดูว่าหน้าจอสีขาวปรากฏขึ้นเมื่อผู้ใช้กำลังเดินทางไปยังเส้นทางอื่น - มันไม่ใช่รูปลักษณ์ที่ดีสำหรับแอปของคุณ
เราสามารถสร้างสมดุลระหว่างความต้องการความเร็วกับความต้องการประสบการณ์ผู้ใช้ที่ราบรื่นได้หรือไม่? แน่นอน ให้ฉันแสดงให้คุณเห็นว่าจะทำอย่างไร (ด้วย TypeScript แน่นอน)
วิธีการตัดตรงไปที่ปัญหาคือการบันทึกทุกเวอร์ชันของชิ้นส่วนในเซิร์ฟเวอร์ ดังนั้นไม่มีปัญหา "ชิ้นส่วนที่หายไป" อีกต่อไป เมื่อแอปของคุณเติบโตขึ้น วิธีแก้ปัญหานี้อาจไม่สามารถทำได้เนื่องจากความต้องการพื้นที่ดิสก์ที่เพิ่มขึ้น และยังไม่สามารถแก้ปัญหาเครือข่ายได้
จากความจริงที่ว่าการพยายามใหม่หรือการรีเฟรชสามารถแก้ปัญหาได้ เราสามารถนำทางแก้ปัญหาเหล่านี้มาใช้ในโค้ดของเรา เนื่องจากปัญหามักเกิดขึ้นเมื่อผู้ใช้กำลังเดินทางไปยังเส้นทางอื่น เราสามารถแก้ปัญหานี้ได้โดยไม่ต้องให้ผู้ใช้สังเกตเห็น สิ่งที่เราต้องทำคือสร้างกล่องหุ้มรอบฟังก์ชัน React.lazy ที่จะจัดการการพยายามใหม่และการรีเฟรช
มีบทความที่ยอดเยี่ยมอยู่แล้วเกี่ยวกับวิธีการนำทางแก้ปัญหาประเภทนี้มาใช้ ดังนั้นฉันจะมุ่งเน้นไปที่ความคิดและการทำงานภายในของทางแก้ปัญหา
ขั้นตอนแรกคือสร้างกรอบรอบฟังก์ชัน React.lazy:
สำหรับปัญหาเกี่ยวกับเครือข่าย เราสามารถจัดการกับการพยายามใหม่โดยห่อฟังก์ชัน importFunction ในฟังก์ชัน tryImport:
ดูเหมือนง่าย ใช่ไหม? คุณยังสามารถนำอัลกอริทึม exponential backoff มาใช้เพื่อจัดการกับการพยายามใหม่ได้อย่างมีประสิทธิภาพมากขึ้น
สำหรับปัญหาเวอร์ชันที่ล้าสมัย เราสามารถจัดการกับการรีเฟรชโดยจับข้อผิดพลาดและรีเฟรชหน้า:
อย่างไรก็ตาม การดำเนินการนี้อันตรายมาก เนื่องจากอาจทำให้เกิดการลูปซ้ำที่ไม่สิ้นสุดของการรีเฟรชเมื่อไม่สามารถแก้ไขข้อผิดพลาดได้โดยการรีเฟรช ในขณะเดียวกัน สถานะแอปจะสูญหายระหว่างการรีเฟรช ดังนั้นเราจึงต้องใช้ความช่วยเหลือจาก sessionStorage เพื่อบันทึกข้อความที่เราได้ลองรีเฟรชหน้า:
ตอนนี้เมื่อเราจับข้อผิดพลาดจากฟังก์ชัน safeLazy เราก็รู้ว่าเป็นปัญหาที่ไม่สามารถแก้ไขได้โดยการรีเฟรช
ยังมีปัญหาที่ซ่อนอยู่กับการดำเนินการปัจจุบัน หากคุณมีคอมโพเนนต์ lazy หลายตัวในหน้าเดียว ลูปซ้ำที่ไม่สิ้นสุดยังสามารถเกิดขึ้นได้เนื่องจากคอมโพเนนต์อื่นอาจรีเซ็ตค่าของ sessionStorage เพื่อแก้ปัญหานี้ เราสามารถใช้คีย์เฉพาะสำหรับแต่ละคอมโพเนนต์:
ตอนนี้แต่ละคอมโพเนนต์จะมีคีย์ของ sessionStorage ของตัวเอง และลูปซ้ำที่ไม่สิ้นสุดของการรีเฟรชจะถูกหลีกเลี่ยง เราสามารถไตร่ตรองเลือกติเอาของทางแก้ปัญหาได้อีก เช่น:
แต่ฉันคิดว่าคุณได้ไอเดียแล้ว ทางแก้ปัญหา TypeScript ที่ครบถ้วนพร้อมทดสอบและกำหนดค่าได้มีอยู่ใน GitHub repository ฉันยังได้เผยแพร่แพ็กเกจ react-safe-lazy บน NPM ดังนั้นคุณสามารถนำไปใช้ในโครงการของคุณได้ทันที
การพัฒนาซอฟต์แวร์เป็นงานที่ละเอียดอ่อน และแม้แต่รายละเอียดเล็กๆ น้อยๆ ก็อาจใช้ความพยายามในการแก้ไข ฉันหวังว่าบทความนี้จะช่วยให้คุณจัดการปัญหากับ React.lazy ได้อย่างราบรื่นและปรับปรุงประสบการณ์ผู้ใช้ของแอปของคุณ