التحميل الكسول المعماري باستخدام React.lazy

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

إذا تم شحن كل شيء في حزمة واحدة، فيجب على المتصفحdownload ،parse ، وevaluate JavaScript على جميع المكونات قبل أن يتمكن React من محاولة عرضها. هذا يزيد من حجم الحزمة ويؤخر عملية العرض.first commit يتم تأجيل التفاعل لأن React يجب أن ينتظر حتى ينتهي تحميل وتنفيذ التعليمات البرمجية غير الضرورية قبل أن تصبح واجهة المستخدم متجاوبة.

يُحلّ تقسيم الكود هذه المشكلة بتحويل كود المكونات إلى تبعية عند الطلب. فبدلاً من دفع تكلفة JavaScript كاملةً مُقدماً، نؤجل تحميل الميزات غير الأساسية حتى يُرجّح أن يحتاجها المستخدم، مما يسمح React بإضافة واجهة مستخدم مفيدة في وقتٍ أقرب و"ترقية" الصفحة تدريجياً مع توفر المزيد من الكود.

كيفReact.lazy() عمل

React.lazy() تعتمد هذه الآلية بشكل أساسي على تأجيل العرض. فهي تسمح بتحميل وحدة المكون بشكل غير متزامن، مما قد يُتيح React مواجهة مكون لم يكتمل تنفيذ كوده بعد. من وجهة نظر React، يُشبه هذا الأمر البيانات المفقودة: لا يمكن إكمال الشجرة الفرعية حتى تتوفر التبعية.

عندما يقوم React بعرض مكون كسول، فإنه يحاول تحميل الوحدة. إذا لم يتم تحميلها بعد، يقوم React بتعليق تلك الشجرة الفرعية عن طريق طرح استثناء.Promise . قريبSuspense يجب أن تتولى الحدود هذه المهمة، بتحديد أين يمكن React التوقف وما هي واجهة المستخدم البديلة التي يجب استخدامها.commit في هذه الأثناء، يمكن لـ React الاستمرار في عرض وتثبيت أجزاء أخرى من الشجرة.

React.lazy يجعل React رمز المكون جزءًا من أهلية العرض، تمامًا مثل البيانات. إذا لم يكن الرمز جاهزًا، يتوقف React مؤقتًا. بدلًا من تحديد وقت تحميل الرمز بشكل إلزامي، تُحدد المكونات المسموح بتأجيل تحميلها. ثم يعرض React ما يستطيع، ويتوقف مؤقتًا عند الضرورة، ويُحدّث واجهة المستخدم عند وصول الوحدة.

يُعدّ التحميل الكسول الأنسب لواجهات المستخدم غير الحرجة، واللوحات الثانوية، والأدوات المتقدمة، والنوافذ المنبثقة، والمسارات العميقة. تجنّب تأجيل تحميل واجهة المستخدم الرئيسية أو مسار العمل الأساسي. عند استخدامه بهذه الطريقة،React.lazy() يصبح مصدراً آخر للتعليق يمكن للبث أن يتجاوزه، مما يسمح للصدفة وواجهة المستخدم الرئيسية بالالتزام بينما يتم ملء التعليمات البرمجية المؤجلة لاحقاً.

يوضح الرسم التخطيطي شجرة مكونات حيث يتم عرض الهيكل والمحتوى الأساسي بشكل متزامن. يتم تعريف لوحة ثانوية باستخدامReact.lazy() أثناء عملية العرض، يصل React إلى تلك اللوحة ويحاول تحميل وحدتها. ولأن الكود غير متوفر بعد، يُعلّق React هذا الفرع من الشجرة ويُثبّت باقي واجهة المستخدم. Suspense ...