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

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

يدعم Next.js استيراد import() الديناميكي من ES2020 لـ JavaScript. باستخدامه، يمكنك استيراد وحدات JavaScript بشكل ديناميكي والعمل معها. كما أنها تعمل مع عرض جانب الخادم (SSR).

فكر في الاستيراد الديناميكي كطريقة أخرى لتقسيم الكود الخاص بك إلى أجزاء قابلة للإدارة.

افتح ملف pages/index.js وقم بإزالة هذين الاستيرادين في بداية الملف حيث سنقوم باستيرادهما ديناميكيًا لاحقًا في الملف.

import Fuse from 'fuse.js';
import _ from 'lodash';

في الوقت الحالي نريد أيضًا إزالة:

const fuse = new Fuse(countries, {
  keys: ['name'],
  threshold: 0.3,
});

الآن بعد أن قمنا بإزالة هذا الكود، لنقم بإعداد حقل البحث لاستخدام المكتبات المستوردة ديناميكيًا.

يمكننا استبدال حقل الإدخال بالكود التالي:

<input
  type="text"
  placeholder="بحث عن دولة..."
  className={styles.input}
  onChange={async (e) => {
    const { value } = e.currentTarget;
    // تحميل المكتبات ديناميكيًا
    const Fuse = (await import('fuse.js')).default;
    const _ = (await import('lodash')).default;
 
    const fuse = new Fuse(countries, {
      keys: ['name'],
      threshold: 0.3,
    });
 
    const searchResult = fuse.search(value).map((result) => result.item);
 
    const updatedResults = searchResult.length ? searchResult : countries;
    setResults(updatedResults);
 
    // تسجيل تحليلات وهمية
    console.info({
      searchedAt: _.now(),
    });
  }}
/>

باستخدام الاستيراد الديناميكي، يتم حل مشكلة "إزالة JavaScript غير المستخدم" أثناء تحميل الصفحة. كما يحسن هذا من وقت التفاعل (TTI)، مما يساعد في تحسين تأخر الإدخال الأول (FID).

لنقم بتشغيل تقرير Lighthouse آخر في Chrome DevTools لمشاهدة تقدمنا.

قراءة إضافية

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