استخدم React.lazy بثقة: طريقة آمنة لتحميل المكونات عند التكرار بسرعة

المعضلة#

في الوقت الحاضر، يتقدم تطوير البرمجيات بسرعة تحت الفلسفة الشعبية "التحرك بسرعة وكسر الأشياء". لا حكم هنا - هذا هو الحال. ومع ذلك، يمكن أن يؤدي هذا الإيقاع السريع إلى مشاكل، خاصة عندما يتعلق الأمر بتحميل المكونات في React.

إذا كنت تعمل على مشروع يستخدم React.lazy لتحميل المكونات عند الطلب، فقد تكون قد واجهت بعض المشاكل مثل ChunkLoadError وLoading chunk failed. إليك بعض الأسباب المحتملة:

• هناك مشكلة في الشبكة، على سبيل المثال، اتصال الإنترنت الخاص بالمستخدم بطيء أو غير مستقر.
• المستخدم يستخدم إصدار قديم للتطبيق، والمتصفح يحاول تحميل جزء لم يعد موجودًا.

عادةً، يمكن لحل بسيط بتحديث الصفحة أن يحل المشكلة، لكنها ليست تجربة ممتازة للمستخدم. تخيل أن تظهر شاشة بيضاء عندما يكون المستخدم يتنقل إلى مسار آخر - ليس جيدًا لمظهرك تطبيقك.

هل يمكننا تحقيق التوازن بين الحاجة إلى السرعة والحاجة إلى تجربة مستخدم سلسة؟ بالتأكيد. دعني أريك كيف (بـ TypeScript، بالطبع).

الحل#

حل القوة الغاشمة يمكن أن يكون بحفظ جميع إصدارات الأجزاء على الخادم، بحيث لا تكون هناك مشكلة "الجزء المفقود" بعد الآن. مع نمو تطبيقك، يمكن أن يصبح هذا الحل غير ممكن بسبب الاحتياجات المتزايدة لمساحة القرص، كما لا يحل مشكلة الشبكة.

نظرًا لأن محاولة التكرار أو التحديث يمكن أن تحل المشكلة، يمكننا تنفيذ هذه الحلول في شفرتنا. نظرًا لأن المشكلة تحدث عادة عندما يكون المستخدم يتنقل إلى مسار آخر، يمكننا حلها دون أن يلاحظ المستخدم. كل ما نحتاج إليه هو بناء ملف التفاف حول وظيفة React.lazy التي ستتعامل مع محاولات التكرار والتحديثات.

هناك بالفعل بعض المقالات الرائعة حول كيفية تنفيذ هذا النوع من الحل، لذا سأركز على الفكرة والوظائف الباطنية للحل.

إنشاء ملف التفاف#

أول خطوة هي إنشاء ملف التفاف حول وظيفة React.lazy:

التعامل مع محاولات التكرار#

للتعامل مع مشاكل الشبكة، يمكننا التعامل معها عن طريق إكساء وظيفة importFunction في وظيفة tryImport:

تبدو بسيطة، أليس كذلك؟ يمكنك أيضًا تنفيذ خوارزمية التراجع الأسي للتعامل مع محاولات التكرار بشكل أكثر كفاءة.

التعامل مع التحديثات#

لمشكلة الإصدار القديم، يمكننا التعامل مع التحديثات عن طريق التقاط الخطأ وتحديث الصفحة:

ومع ذلك، قد تكون هذه الطريقة خطيرة جدًا، حيث يمكن أن تتسبب في تكرار لا نهائي للتحديثات عندما لا يمكن حل الخطأ بواسطة تحديث. وفي الوقت نفسه، ستفقد حالة التطبيق خلال التحديث. لذلك نحتاج إلى مساعدة sessionStorage لتخزين الرسالة التي حاولنا تحديث الصفحة:

الآن، عندما نلتقط الخطأ من وظيفة safeLazy، نعلم أنه شيء لا يمكن حله بواسطة تحديث.

مكونات Lazy متعددة على نفس الصفحة#

لا تزال هناك مشكلة مخفية مع التنفيذ الحالي. إذا كان لديك مكونات Lazy متعددة على نفس الصفحة، يمكن أن يحدث تكرار لا نهائي للتحديثات لأن مكونات أخرى قد تعيد ضبط قيمة sessionStorage. لحل هذه المشكلة، يمكننا استخدام مفتاح فريد لكل مكون:

الآن، سيكون لكل مكون مفتاح خاص به في sessionStorage، وستُتجنب التكرارات اللانهائية للتحديث. يمكننا الاستمرار في تحسين الحل، على سبيل المثال:

• جمع جميع المفاتيح في مصفوفة، وبالتالي يحتاج مفتاح تخزين واحد فقط.
• تعيين حد للتحديث لتحديث الصفحة أكثر من مرة واحدة قبل إلقاء خطأ.

لكني أعتقد أنك فهمت الفكرة. تم توفير حل شامل بـ TypeScript مع الاختبارات والإعدادات في مستودع GitHub. لقد نشرت أيضًا حزمة react-safe-lazy على NPM، بحيث يمكنك استخدامها في مشروعك فورًا.

الخاتمة#

تطوير البرمجيات عمل دقيق، وحتى أصغر التفاصيل قد تتطلب جهودًا لحلها. آمل أن تساعدك هذه المقالة في التعامل بمرونة مع المشكلات التي تتعلق بـ React.lazy وتحسين تجربة المستخدم لتطبيقك.