هل تطبيق React الخاص بك بطيء جدًا أو يستغرق وقتًا طويلاً في التحميل؟ إذا كان الأمر كذلك ، فقد ترغب في استخدام تقنية تعرف باسم تقسيم الكود. هذه التقنية فعالة جدًا في تحسين سرعة التحميل وأداء تطبيقات React. ولكن ما هو تقسيم الكود؟ وكيف يتم ذلك؟

ما هو تقسيم الكود؟

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

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

افتح صفحة ويب على متصفح الويب الخاص بك ، ثم افتح DevTools (يمكنك النقر فوق F12 على لوحة المفاتيح لفتحها على Google Chrome). بعد ذلك ، انتقل إلى علامة التبويب المصدر. ستجد هناك كل التعليمات البرمجية التي تم تنزيلها أثناء انتقالك إلى الصفحة. بدون تقسيم الكود ، يقوم المتصفح بتنزيل جميع الملفات في مشروعك عند تحميل الصفحة الأولى. يمكن أن يؤدي ذلك إلى إبطاء موقع الويب الخاص بك إذا كان يحتوي على الكثير من الملفات.

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

أفضل جزء في تقسيم الكود هو أنه يمكنك تأخير تحميل المكونات وكذلك الوظائف. ملكنا دليل تمهيدي عن ReactJS يشرح بالتفصيل المكونات والوظائف في حال احتجت إلى تجديد المعلومات.

وظائف تقسيم التعليمات البرمجية: استخدام الاستيراد الديناميكي

ضع في اعتبارك الموقف التالي. تريد أن يكون لصفحتك الرئيسية زر. عند النقر فوق الزر ، تريد تنبيه مجموع 2 و 2 (وهو 4). لذلك تقوم بإنشاء ملف Home.js المكون وتحديد طريقة عرض صفحتك الرئيسية.

في هذه الحالة ، لديك خياران. أولاً ، يمكنك استيراد الكود لإضافة الأرقام الموجودة أعلى ملف Home.js ملف. لكن ها هي المشكلة. إذا كنت تريد استيراد الوظيفة الموجودة أعلى الملف ، فسيتم تحميل الرمز حتى عندما لا تنقر فوق الزر. سيكون النهج الأفضل هو تحميل ملف مجموع() تعمل فقط عند النقر فوق الزر.

لتحقيق ذلك ، ستحتاج إلى إجراء استيراد ديناميكي. هذا يعني أنك ستستورد ملف مجموع() وظيفة مضمنة في عنصر الزر. إليك رمز نفسه:

يصدّرتقصيروظيفةبيت() { 
يعود ( 
"بيت"> 
الصفحة الرئيسية </h1>
 {
يستورد("../sum.js").ثم((وحدة) => {
 يُحذًِر(وحدة.مجموع(2, 2))
 })
 }}
 >
 اجمع كلا العددين
 </button> 
 </div> 
 ); 
}

الآن سيقوم المتصفح بتنزيل ملف sum.js وحدة عند النقر فوق الزر. هذا يحسن وقت تحميل الصفحة الرئيسية.

مكونات تقسيم الكود: استخدام React.lazy و Suspense

يمكنك تقسيم المكونات في React باستخدام امتداد كسول() وظيفة. سيكون أفضل مكان لإجراء تقسيم الكود هو داخل جهاز التوجيه الخاص بك. لأن هذا هو المكان الذي تقوم فيه بتعيين المكونات إلى المسارات في تطبيقك. يمكنك قراءة دليلنا على كيفية إنشاء تطبيق من صفحة واحدة باستخدام React Router إذا كنت بحاجة إلى تنشيط.

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

أولاً ، تحتاج إلى استيراد الوظائف والمكونات المطلوبة من ملف تتفاعل و رد فعل جهاز التوجيه دوم الوحدات:

يستورد {مسارات ، مسار ، منفذ ، رابط} من"رد فعل جهاز التوجيه دوم";
يستورد {كسول ، ترقب} من"تتفاعل";

بعد ذلك ، تحتاج إلى استيراد المكونات ديناميكيًا باستخدام ملف كسول() وظيفة:

مقدار ثابت الصفحة الرئيسية = كسول (() =>يستورد("./components/Home"));
مقدار ثابت حول = كسول (() =>يستورد("./components/About"));
مقدار ثابت المنتجات = كسول (() =>يستورد("./components/Products"));

بعد ذلك ، قم بإعداد التخطيط (قائمة التنقل). استخدم ال المكوِّن لعرض المكون الذي يتوافق مع المسار الحالي (بيت, عن، أو منتجات عنصر):

وظيفةنافورابر() {
يعود (
 <>

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

أخيرًا ، قم بإعداد المسار:

يصدّرتقصيروظيفةبرنامج() {
يعود (

"/" العنصر = {}>
"/" العنصر = {} />
"/منتجات" العنصر = {} />
"/عن" العنصر = {} />
 </Route>
 </Routes>
 );
}

الآن عندما تزور الصفحة الرئيسية ، يقوم المتصفح بتحميل ملف Home.js ملف. بنفس الطريقة ، عند النقر فوق ملف عن في قائمة التنقل لزيارة صفحة "حول" ، يقوم المتصفح بتحميل ملف About.js ملف. هذا هو نفسه بالنسبة لصفحة المنتجات.

تقسيم الكود الشرطي

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

في هذه الحالة ، لن ترغب في عرض كل هذه البيانات في كل مرة. في هذه الحالة ، يمكنك استخدام تقنية تقسيم الشفرة للتأكد من أنك لا تعرض هذه المعلومات إلا إذا كان هذا الشخص مسؤولاً.

إليك ما سيبدو عليه هذا الرمز:

يستورد {كسول ، ترقب} من"تتفاعل";
مقدار ثابت AdminData = كسول (() =>يستورد("./AdminData"));
يصدّرتقصيروظيفةبيت() { 
مقدار ثابت [isAdmin، setIsAdmin] = useState (خطأ شنيع)
يعود ( 

"بيت"> 
الصفحة الرئيسية </h1>
 setIsAdmin (السابق =>! prev)}>
 تبديل المسؤول
 </button> 

جارى التحميل .../h1>}>
 {isAdmin؟ <AdminData />: <h2> ليس المسؤول h2>} 
 </Suspense>
 </div> 
 ); 
}

الآن ، عند النقر فوق زر التبديل ، isAdmin سيتم تعيينه إلى حقيقي. نتيجة لذلك ، سيعرض التطبيق ملف يتم تحميلها بشكل كسول. ولكن إذا لم تكن مستخدمًا إداريًا ، فلن يتم تنزيل التطبيق أبدًا AdminData.js لأنها لن تحتاج إليها.

يستخدم تقسيم الكود الشرطي نفس مفهوم التصيير الشرطي في React.

مفاهيم متقدمة لتقسيم الكود

إحدى التقنيات المتقدمة التي يمكنك تمكينها عند تقسيم التعليمات البرمجية هي الانتقالات. ال useTransition () يسمح لك الخطاف بالقيام بتحديثات غير عاجلة والتي لن تغير واجهة المستخدم الخاصة بك حتى تنتهي من التحديث.

أولاً ، تقوم باستيراد الخطاف:

يستورد {useTransition} من"تتفاعل"

ثم تقوم باستدعاء الخطاف الذي يعود معلق و بدء الانتقال:

مقدار ثابت [isPending، startTransition] = useTransition ()

أخيرًا ، قم بلف الكود لتحديث حالتك بالداخل بدء الانتقال ():

startTransition (() => {
 setIsAdmin ((السابق) =>! prev)
})

الآن لن تعرض واجهة المستخدم الفعلية الخاصة بك القيمة الاحتياطية (نص التحميل) حتى ينتهي المتصفح من الانتقال. هذا يعني أنه سينتظر حتى يقوم المتصفح بتنزيل بيانات المسؤول بالكامل قبل أن يحاول إظهار أي بيانات على الإطلاق.

طرق أخرى لتحسين أداء التفاعل

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