تقسيم الرمز باستخدام عمليات الاستيراد الديناميكية في Next.js

كيفية تسريع تطبيق Next.js باستخدام تقسيم الرموز البرمجية واستراتيجيات التحميل الذكية

Milica Mihajlija

تاريخ النشر: 8 تشرين الثاني (نوفمبر) 2019

تعرَّف على الأنواع المختلفة من تقسيم الرموز البرمجية وكيفية استخدام عمليات الاستيراد الديناميكية لتسريع تطبيقات Next.js.

تقسيم الرموز البرمجية المستند إلى المسار والمستند إلى المكوّن

تقسّم Next.js تلقائيًا JavaScript إلى أجزاء منفصلة لكل مسار. عندما يحمّل المستخدمون تطبيقك، لا يرسل Next.js سوى الرمز المطلوب للمسار الأوّلي. عندما يتنقّل المستخدمون في التطبيق، يجلبون الأجزاء المرتبطة بالمسارات الأخرى. يقلّل تقسيم الرموز البرمجية المستند إلى المسار من مقدار النصوص البرمجية التي يجب تحليلها وتجميعها في وقت واحد، ما يؤدي إلى تسريع أوقات تحميل الصفحات.

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

يتوافق Next.js مع الاستيراد الديناميكي import()، ما يتيح لك استيراد وحدات JavaScript (بما في ذلك مكوّنات React) ديناميكيًا وتحميل كل عملية استيراد كجزء منفصل. يمنحك ذلك تقسيم الرمز على مستوى المكوّن ويتيح لك التحكّم في تحميل الموارد، ما يضمن ألا يضطر المستخدمون إلى تنزيل الرمز الذي يحتاجون إليه إلا للجزء الذي يتصفحونه من الموقع الإلكتروني. في Next.js، يتم عرض هذه المكوّنات من جهة الخادم (SSR) تلقائيًا.

استخدام عمليات الاستيراد الديناميكية

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

في الإصدار الأول من التطبيق، يعيش الجرو في components/Puppy.js. لعرض الجرو على الصفحة، يستورد التطبيق المكوّن Puppy في index.js باستخدام عبارة استيراد ثابتة:

import Puppy from "../components/Puppy";

لمعرفة كيفية تجميع Next.js للتطبيق، افحص تتبُّع الشبكة في "أدوات المطوّرين":

  1. لمعاينة الموقع الإلكتروني، انقر على عرض التطبيق، ثم انقر على ملء الشاشة ملء الشاشة.

  2. اضغط على Control+Shift+J (أو Command+Option+J على جهاز Mac) لفتح "أدوات مطوّلي البرامج".

  3. انقر على علامة التبويب الشبكة.

  4. ضَع علامة في مربّع الاختيار إيقاف ذاكرة التخزين المؤقت.

  5. إعادة تحميل الصفحة

عند تحميل الصفحة، يتم تجميع كل الرموز الضرورية، بما في ذلك المكوّن Puppy.js، في index.js:

تعرض علامة التبويب "الشبكة" في "أدوات مطوّلي البرامج" ستة ملفات JavaScript: index.js وapp.js وwebpack.js وmain.js و0.js وملف dll (مكتبة الربط الديناميكي).

عند الضغط على الزر انقر هنا، تتم إضافة طلب ملف JPEG الخاص بالجرو فقط إلى علامة التبويب الشبكة:

علامة التبويب "الشبكة" في "أدوات مطوّلي البرامج" بعد النقر على الزرّ، تعرض ملفات JavaScript الستة نفسها وصورة واحدة.

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

الآن، اطّلِع على إصدار ثانٍ من التطبيق تم فيه استبدال عملية الاستيراد الثابتة بعملية استيراد ديناميكية. يتضمّن Next.js next/dynamic، ما يتيح استخدام عمليات الاستيراد الديناميكية لأي مكوّنات في Next:

import Puppy from "../components/Puppy";
import dynamic from "next/dynamic";

// ...

const Puppy = dynamic(import("../components/Puppy"));

اتّبِع الخطوات الواردة في المثال الأول لفحص تتبُّع الشبكة.

عند تحميل التطبيق للمرة الأولى، يتم تنزيل index.js فقط. هذه المرة، أصبح حجمها أقل بمقدار 0.5 كيلوبايت (انخفض من 37.9 كيلوبايت إلى 37.4 كيلوبايت) لأنّها لا تتضمّن الرمز البرمجي للمكوّن Puppy:

تعرض "شبكة أدوات مطوّلي البرامج" (DevTools Network) ملفات JavaScript الستة نفسها، باستثناء أنّ حجم ملف index.js أصبح الآن أصغر بمقدار 0.5 كيلوبايت.

أصبح المكوّن Puppy الآن في جزء منفصل، 1.js، يتم تحميله فقط عند النقر على الزر:

علامة التبويب "الشبكة" في "أدوات مطوّلي البرامج" بعد النقر على الزر، تعرض ملف 1.js الإضافي والصورة التي تمت إضافتها إلى أسفل قائمة الملفات.

في التطبيقات الواقعية، تكون المكوّنات في الغالب أكبر بكثير، ويمكن أن يؤدي التحميل الكسول لها إلى تقليل حجم حمولة JavaScript الأولية بمئات الكيلوبايت.

عمليات الاستيراد الديناميكية مع مؤشر تحميل مخصّص

عند تحميل الموارد بشكل غير متزامن، من الممارسات الجيدة توفير مؤشر تحميل في حال حدوث أي تأخير. في Next.js، يمكنك إجراء ذلك من خلال تقديم وسيطة إضافية إلى الدالة dynamic():

const Puppy = dynamic(() => import("../components/Puppy"), {
  loading: () => <p>Loading...</p>
});

لمشاهدة مؤشر التحميل أثناء العمل، حاكِ اتصالاً بطيئًا بالشبكة في &quot;أدوات المطوّرين&quot; باتّباع الخطوات التالية:

  1. لمعاينة الموقع الإلكتروني، انقر على عرض التطبيق، ثم انقر على ملء الشاشة ملء الشاشة.

  2. اضغط على Control+Shift+J (أو Command+Option+J على جهاز Mac) لفتح "أدوات مطوّلي البرامج".

  3. انقر على علامة التبويب الشبكة.

  4. ضَع علامة في مربّع الاختيار إيقاف ذاكرة التخزين المؤقت.

  5. في القائمة المنسدلة التقييد، اختَر 3G السريع.

  6. اضغط على الزر انقر هنا.

عند النقر على الزر، يستغرق تحميل المكوّن والتطبيق بعض الوقت، ويعرض التطبيق الرسالة "جارٍ التحميل…" في هذه الأثناء.

شاشة داكنة تتضمّن النص

عمليات الاستيراد الديناميكية بدون عرض من جهة الخادم

إذا كنت بحاجة إلى عرض مكوّن على جهة العميل فقط (مثل أداة محادثة)، يمكنك إجراء ذلك من خلال ضبط الخيار ssr على false:

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

الخاتمة

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