الاستيراد الديناميكي للمكونات

الآن، دعونا نوجه انتباهنا إلى مكون React غير مطلوب عند التحميل الأولي للصفحة.

يمكن أيضًا استيراد مكونات React باستخدام عمليات الاستيراد الديناميكية، ولكن في هذه الحالة نستخدمها مع next/dynamic للتأكد من أنها تعمل مثل أي مكون React آخر.

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

افتح ملف pages/index.js وأضف استيرادًا لـ dynamic من next/dynamic في بداية الملف:

import dynamic from 'next/dynamic';

يجب علينا أيضًا إزالة هذا السطر:

import CodeSampleModal from '../components/CodeSampleModal';

يمكننا الآن استيراده كمكون ديناميكي عن طريق إضافة ما يلي في بداية الملف:

const CodeSampleModal = dynamic(() => import('../components/CodeSampleModal'), {
  ssr: false,
});

سيكون CodeSampleModal هو المكون الافتراضي الذي يتم إرجاعه بواسطة ../components/CodeSampleModal. يعمل مثل مكون React العادي، ويمكنك تمرير الخصائص (props) إليه كما تفعل عادةً.

بما أننا لا نحتاج هذا المكون على الخادم، فقد استخدمنا ssr: false لتعطيله.

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

قم بتغليف مكون CodeSampleModal كما يلي:

{
  isModalOpen && (
    <CodeSampleModal
      isOpen={isModalOpen}
      closeModal={() => setIsModalOpen(false)}
    />
  );
}

الآن، عندما يتم تبديل isModalOpen إلى true لأول مرة، سيتم طلب JavaScript المطلوب.

مع هذه التحسينات، يجب أن تبدو المقاييس الحيوية الآن أكثر صحة. دعونا نجري تقرير Lighthouse آخر في أدوات مطوري Chrome للتحقق.

تبقى لدينا هاتان النقطتان للتحسين:

• استخدم HTTP2: لحل هذه المشكلة، يمكننا النشر على مكان يدعم HTTP2 (مثل Vercel).
• عناصر الصور ليس لها width و height صريحين: هذه في الواقع مشكلة في lighthouse ولا تؤثر على أداء الموقع.

قراءة إضافية

• Next.js: توثيق الاستيراد الديناميكي