تقليل حمولات JavaScript من خلال تقسيم الرمز

Houssein Djirdeh
Jeremy Wagner

لا يحب أحد الانتظار. يهجر أكثر من% 50 من المستخدمين موقعًا إلكترونيًا إذا استغرق تحميله أكثر من 3 ثوانٍ.

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

ما هي فوائد تقسيم الرموز البرمجية؟

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

في ما يتعلق بمؤشرات أداء الويب الأساسية Core Web Vitals، سيساهم تقليل حمولات JavaScript التي يتم تنزيلها عند بدء التشغيل في تحسين أوقات مقياس مدى استجابة الصفحة لتفاعلات المستخدم Interaction to Next Paint (INP). ويستند هذا إلى أنّه من خلال تحرير الخيط الرئيسي، يمكن للتطبيق الاستجابة لإدخالات المستخدم بشكل أسرع من خلال تقليل تكاليف بدء التشغيل المرتبطة بتحليل JavaScript وتجميعها وتنفيذها.

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

القياس

تعرض أداة Lighthouse تدقيقًا فاشلاً عندما يستغرق تنفيذ كل JavaScript على صفحة وقتًا طويلاً.

عملية تدقيق فاشلة في Lighthouse تعرض نصوصًا برمجية تستغرق وقتًا طويلاً جدًا لتنفيذها

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

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

import moduleA from "library";

form.addEventListener("submit", e => {
  e.preventDefault();
  someFunction();
});

const someFunction = () => {
  // uses moduleA
}

في هذا المثال، تستخدم someFunction وحدة مستورَدة من مكتبة معيّنة. إذا لم يتم استخدام هذه الوحدة في مكان آخر، يمكن تعديل مجموعة الرموز لاستخدام عملية استيراد ديناميكية لجلبها فقط عندما يرسل المستخدم النموذج.

form.addEventListener("submit", e => {
  e.preventDefault();
  import('library.moduleA')
    .then(module => module.default) // using the default export
    .then(() => someFunction())
    .catch(handleError());
});

const someFunction = () => {
    // uses moduleA
}

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

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

يُعدّ التقسيم على مستوى المسار أو المكوّن عند استخدام إطار عمل من جهة العميل أسلوبًا أبسط للتحميل الكسول لأجزاء مختلفة من تطبيقك. توفّر العديد من أطر العمل الشائعة التي تستخدم webpack عمليات تجريد لتسهيل التحميل عند الطلب بدلاً من الخوض في عمليات الإعداد بنفسك.