دليل التحميل الكسول باستخدام React

المُقدّمة

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

يمكننا تجنب تحميل المحتوى مسبقًا بينما لا يزال بعيدًا عن العرض ، وتركيز جميع الموارد على المحتوى الموجود في العرض.

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

ما هو التحميل الكسول؟

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

Lazy Loading يسمح لنا بتحميل مكونات محددة فقط عند الحاجة إليها. عادة ، نحن أيضا نؤدي تقسيم الكود إلى مكونات منطقية يمكن تحميلها كسولًا بالمحتوى أيضًا.

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

ملحوظة: تُعرف عملية بصق حزمة كبيرة من التعليمات البرمجية إلى حزم متعددة يمكن تحميلها ديناميكيًا بهدف عام وهو تجنب مشكلات الأداء المرتبطة بالحزم كبيرة الحجم باسم تقسيم التعليمات البرمجية. يتم تحقيق ذلك دون تقليل كمية الكود في تطبيقنا.

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

ملحوظة: تطبيقات الصفحة الواحدة (واس) تم تصميمها لتحتوي على جميع الصفحات والمحتوى داخل مستند / صفحة واحدة. هذا هو السبب في أن التحميل البطيء يكون مفيدًا بشكل خاص عند تطوير SPA.

كيفية تنفيذ التحميل الكسول في React

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

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

React.Suspense تمكننا من تحديد احتياطي دعم الذي يتضمن محتوى عنصرًا نائبًا يمكن استخدامه كملف مؤشر التحميل بينما يتم تحميل جميع المكونات البطيئة.

لنبدأ بالنظر في كيفية تنفيذ التحميل البطيء في المكونات المستوردة ، ثم كيف يمكننا تنفيذه في مساراتنا بحيث لا يتم تحميل الصفحات حتى ننتقل إليها.

كيف تبدأ

لنفترض أن لدينا تطبيق React الخاص بنا ، وقمنا باستيراد ملف About مكون في Home:

import AboutUs from './About';

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <AboutUs />
      </div>
   );
};

export default Home;

يمكننا الآن تنفيذ التحميل البطيء من خلال الاستفادة من React.lazy():

import React from 'react';


const AboutUs = React.lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <AboutUs />
      </div>
   );
};
export default Home;

ملحوظة: React.lazy() تستخدم بهذه الطريقة بإرجاع ملف Promise هدف. يتحول هذا الوعد إلى وحدة تحتوي على مكون React نريد تحميله كسول في default تصدير.

لقد قمنا بتنفيذ التحميل الكسول باستخدام React.lazy()، ولكن الكود أعلاه سيرمي دائمًا ملف خطأ قائلا ان لدينا “React component suspended while rendering, but no fallback UI was specified”. يمكن إصلاح ذلك عن طريق تغليف المكون بـ React.Suspenseالصورة fallbackz وإرفاق الدعائم الاحتياطية كما أوضحنا سابقًا:

import React from 'react';
const AboutUs = React.lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <React.Suspense fallback={<div>Loading...</div>}>
            <AboutUs />
         </React.Suspense>
      </div>
   );
};
export default Home;

ملحوظة: يمكن أن تأخذ الخاصية الاحتياطية أحد المكونات لتظهر قبل تحميل المحتوى الأصلي.

بالإضافة إلى ذلك ، يمكننا أن نقرر تدمير استيراد React لجعل الكود أكثر وضوحًا وقابلية للقراءة:

import { lazy, Suspense } from 'react';
const AboutUs = lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <Suspense fallback={<div>Loading...</div>}>
            <AboutUs />
         </Suspense>
      </div>
   );
};
export default Home;

حتى الآن ، رأينا كيفية تنفيذ التحميل البطيء في مكوناتنا المستوردة. الآن ، دعنا نرى كيفية تنفيذه في مساراتنا أثناء التوجيه باستخدام جهاز التوجيه React.

كيفية تنفيذ التحميل الكسول باستخدام جهاز التوجيه React

يعد التوجيه الكسول في الواقع ممارسة جيدة للطرق التي تحتوي على الكثير من المحتوى وقد تؤدي إلى إبطاء وقت تحميل تطبيقك. يكاد يكون تنفيذ التحميل البطيء لمسارات React مطابقًا لما فعلناه سابقًا عند التحميل البطيء للمكونات المستوردة ديناميكيًا.

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

import { lazy, Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const Products = lazy(() => import('./Products'));

function App() {
   return (
      <BrowserRouter>
         <Suspense fallback={<div>Loading...</div>}>
            <Routes>
               <Route path="/" element={<Home />} />
               <Route path="/products" element={<Products />} />
            </Routes>
         </Suspense>
      </BrowserRouter>
   );
}
export default App;

وفي الختام

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