React.lazy هو طريقة رائعة لتحميل المكونات عند الطلب وتحسين أداء تطبيقك. ومع ذلك، في بعض الأحيان يمكن أن يؤدي إلى بعض المشاكل مثل "ChunkLoadError" و"Loading chunk failed".
في الوقت الحاضر، يتقدم تطوير البرمجيات بسرعة تحت الفلسفة الشعبية "التحرك بسرعة وكسر الأشياء". لا حكم هنا - هذا هو الحال. ومع ذلك، يمكن أن يؤدي هذا الإيقاع السريع إلى مشاكل، خاصة عندما يتعلق الأمر بتحميل المكونات في React.
إذا كنت تعمل على مشروع يستخدم React.lazy لتحميل المكونات عند الطلب، فقد تكون قد واجهت بعض المشاكل مثل ChunkLoadError وLoading chunk failed. إليك بعض الأسباب المحتملة:
عادةً، يمكن لحل بسيط بتحديث الصفحة أن يحل المشكلة، لكنها ليست تجربة ممتازة للمستخدم. تخيل أن تظهر شاشة بيضاء عندما يكون المستخدم يتنقل إلى مسار آخر - ليس جيدًا لمظهرك تطبيقك.
هل يمكننا تحقيق التوازن بين الحاجة إلى السرعة والحاجة إلى تجربة مستخدم سلسة؟ بالتأكيد. دعني أريك كيف (بـ TypeScript، بالطبع).
حل القوة الغاشمة يمكن أن يكون بحفظ جميع إصدارات الأجزاء على الخادم، بحيث لا تكون هناك مشكلة "الجزء المفقود" بعد الآن. مع نمو تطبيقك، يمكن أن يصبح هذا الحل غير ممكن بسبب الاحتياجات المتزايدة لمساحة القرص، كما لا يحل مشكلة الشبكة.
نظرًا لأن محاولة التكرار أو التحديث يمكن أن تحل المشكلة، يمكننا تنفيذ هذه الحلول في شفرتنا. نظرًا لأن المشكلة تحدث عادة عندما يكون المستخدم يتنقل إلى مسار آخر، يمكننا حلها دون أن يلاحظ المستخدم. كل ما نحتاج إليه هو بناء ملف التفاف حول وظيفة React.lazy التي ستتعامل مع محاولات التكرار والتحديثات.
هناك بالفعل بعض المقالات الرائعة حول كيفية تنفيذ هذا النوع من الحل، لذا سأركز على الفكرة والوظائف الباطنية للحل.
أول خطوة هي إنشاء ملف التفاف حول وظيفة React.lazy:
للتعامل مع مشاكل الشبكة، يمكننا التعامل معها عن طريق إكساء وظيفة importFunction في وظيفة tryImport:
تبدو بسيطة، أليس كذلك؟ يمكنك أيضًا تنفيذ خوارزمية التراجع الأسي للتعامل مع محاولات التكرار بشكل أكثر كفاءة.
لمشكلة الإصدار القديم، يمكننا التعامل مع التحديثات عن طريق التقاط الخطأ وتحديث الصفحة:
ومع ذلك، قد تكون هذه الطريقة خطيرة جدًا، حيث يمكن أن تتسبب في تكرار لا نهائي للتحديثات عندما لا يمكن حل الخطأ بواسطة تحديث. وفي الوقت نفسه، ستفقد حالة التطبيق خلال التحديث. لذلك نحتاج إلى مساعدة sessionStorage لتخزين الرسالة التي حاولنا تحديث الصفحة:
الآن، عندما نلتقط الخطأ من وظيفة safeLazy، نعلم أنه شيء لا يمكن حله بواسطة تحديث.
لا تزال هناك مشكلة مخفية مع التنفيذ الحالي. إذا كان لديك مكونات Lazy متعددة على نفس الصفحة، يمكن أن يحدث تكرار لا نهائي للتحديثات لأن مكونات أخرى قد تعيد ضبط قيمة sessionStorage. لحل هذه المشكلة، يمكننا استخدام مفتاح فريد لكل مكون:
الآن، سيكون لكل مكون مفتاح خاص به في sessionStorage، وستُتجنب التكرارات اللانهائية للتحديث. يمكننا الاستمرار في تحسين الحل، على سبيل المثال:
لكني أعتقد أنك فهمت الفكرة. تم توفير حل شامل بـ TypeScript مع الاختبارات والإعدادات في مستودع GitHub. لقد نشرت أيضًا حزمة react-safe-lazy على NPM، بحيث يمكنك استخدامها في مشروعك فورًا.
تطوير البرمجيات عمل دقيق، وحتى أصغر التفاصيل قد تتطلب جهودًا لحلها. آمل أن تساعدك هذه المقالة في التعامل بمرونة مع المشكلات التي تتعلق بـ React.lazy وتحسين تجربة المستخدم لتطبيقك.