ใช้ React.lazy อย่างมั่นใจ: วิธีที่ปลอดภัยในการโหลดคอมโพเนนต์เมื่อทำซ้ำอย่างรวดเร็ว

ภาวะที่กลืนไม่เข้าคายไม่ออก#

ทุกวันนี้ การพัฒนาซอฟต์แวร์กำลังเคลื่อนที่อย่างรวดเร็วภายใต้ปรัชญา "move fast and break things" ที่เป็นที่นิยม ไม่มีการตัดสินใด ๆ ที่นี่ - มันเป็นวิธีที่มันเป็น อย่างไรก็ตาม จังหวะที่รวดเร็วนี้บางครั้งอาจนำไปสู่ปัญหา โดยเฉพาะเมื่อพูดถึงการโหลดคอมโพเนนต์ใน React

หากคุณกำลังทำงานในโครงการที่ใช้ React.lazy เพื่อโหลดคอมโพเนนต์ตามความต้องการ คุณอาจพบปัญหาเช่น ChunkLoadError และ Loading chunk failed นี่คือเหตุผลที่เป็นไปได้บางประการ:

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

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

เราสามารถสร้างสมดุลระหว่างความต้องการความเร็วกับความต้องการประสบการณ์ผู้ใช้ที่ราบรื่นได้หรือไม่? แน่นอน ให้ฉันแสดงให้คุณเห็นว่าจะทำอย่างไร (ด้วย TypeScript แน่นอน)

ทางแก้ไข#

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

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

มีบทความที่ยอดเยี่ยมอยู่แล้วเกี่ยวกับวิธีการนำทางแก้ปัญหาประเภทนี้มาใช้ ดังนั้นฉันจะมุ่งเน้นไปที่ความคิดและการทำงานภายในของทางแก้ปัญหา

สร้างกล่องหุ้ม#

ขั้นตอนแรกคือสร้างกรอบรอบฟังก์ชัน React.lazy:

จัดการกับการพยายามใหม่#

สำหรับปัญหาเกี่ยวกับเครือข่าย เราสามารถจัดการกับการพยายามใหม่โดยห่อฟังก์ชัน importFunction ในฟังก์ชัน tryImport:

ดูเหมือนง่าย ใช่ไหม? คุณยังสามารถนำอัลกอริทึม exponential backoff มาใช้เพื่อจัดการกับการพยายามใหม่ได้อย่างมีประสิทธิภาพมากขึ้น

จัดการกับการรีเฟรช#

สำหรับปัญหาเวอร์ชันที่ล้าสมัย เราสามารถจัดการกับการรีเฟรชโดยจับข้อผิดพลาดและรีเฟรชหน้า:

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

ตอนนี้เมื่อเราจับข้อผิดพลาดจากฟังก์ชัน safeLazy เราก็รู้ว่าเป็นปัญหาที่ไม่สามารถแก้ไขได้โดยการรีเฟรช

หลายคอมโพเนนต์ lazy ในหน้าหนึ่ง#

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

ตอนนี้แต่ละคอมโพเนนต์จะมีคีย์ของ sessionStorage ของตัวเอง และลูปซ้ำที่ไม่สิ้นสุดของการรีเฟรชจะถูกหลีกเลี่ยง เราสามารถไตร่ตรองเลือกติเอาของทางแก้ปัญหาได้อีก เช่น:

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

แต่ฉันคิดว่าคุณได้ไอเดียแล้ว ทางแก้ปัญหา TypeScript ที่ครบถ้วนพร้อมทดสอบและกำหนดค่าได้มีอยู่ใน GitHub repository ฉันยังได้เผยแพร่แพ็กเกจ react-safe-lazy บน NPM ดังนั้นคุณสามารถนำไปใช้ในโครงการของคุณได้ทันที

บทสรุป#

การพัฒนาซอฟต์แวร์เป็นงานที่ละเอียดอ่อน และแม้แต่รายละเอียดเล็กๆ น้อยๆ ก็อาจใช้ความพยายามในการแก้ไข ฉันหวังว่าบทความนี้จะช่วยให้คุณจัดการปัญหากับ React.lazy ได้อย่างราบรื่นและปรับปรุงประสบการณ์ผู้ใช้ของแอปของคุณ