استراتيجيات تقسيم الكود والتحميل المسبق

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

من وجهة نظر React، لا تكمن التكلفة الحقيقية لملفات JavaScript الكبيرة في حجمها، بل في جاهزيتها للعرض. لا يمكن حفظ واجهة المستخدم حتى يتم حفظ الكود الذي يُعرّفها.downloaded ،parsed ، وevaluated لهذا السبب، لا يُعدّ تقسيم الكود مجرد حيلة لتجميع الملفات، بل هو أداة لجدولة العرض: فهو يسمح لك بتحديد ما يجب أن يكون موجودًا في البداية.commit ما الذي يمكن تأجيله إلى عمليات التحديث اللاحقة، وما الذي يجب أن يبدأ تحميله مبكراً بناءً على نية المستخدم.

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

عند استخدامها بشكل جيد، تتيح تقنيتا التقسيم والتحميل المسبق تجربة تعتمد على البث المباشر أولاً: واجهة المستخدم الرسوميةcommits فورًا، تظهر واجهة المستخدم الرئيسية بمجرد أن تصبحrenderable ويمكن ترقية الميزات الاختيارية لاحقًا دون التأثير على ما هو معروض على الشاشة. أما إذا استُخدمت بشكل سيئ، فإنها تُنشئ المزيد من الحلول البديلة وتُبعد التفاعل. ويكمن الفرق في...feature seams ،boundary placement ، وintent-driven loading .

كيفية عمل التقسيم والتحميل المسبق

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

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