حزمة ويب
يتم تضمين webpack مع مكوّن إضافي باسم SplitChunksPlugin، ما يتيح لك
تهيئة كيفية تقسيم أداة التجميع لملفات JavaScript. تتعرف عليها حزمة webpack على حد سواء
عبارات import() ديناميكية وimport ثابتة. سلوك
يمكن تعديل SplitChunksPlugin من خلال تحديد الخيار chunks في
التكوين:
chunks: async هي القيمة التلقائية، وتشير إلى طلبات import() الديناميكية.- تشير السمة
chunks: initial إلى مكالمات import الثابتة.
- تشمل
chunks: all عمليات الاستيراد import() الديناميكية وعمليات الاستيراد الثابتة، ما يتيح لك
لمشاركة المجموعات بين عمليات الاستيراد من async وinitial.
بشكل تلقائي، عندما تواجه حزمة webpack عبارة import() ديناميكية. هو/هي
تنشئ مقطعًا منفصلاً لتلك الوحدة:
/* main.js */
// An application-specific chunk required during the initial page load:
import myFunction from './my-function.js';
myFunction('Hello world!');
// If a specific condition is met, a separate chunk is downloaded on demand,
// rather than being bundled with the initial chunk:
if (condition) {
// Assumes top-level await is available. More info:
// https://v8.dev/features/top-level-await
await import('/form-validation.js');
}
ينتج عن إعداد حزمة الويب التلقائية لمقتطف الرمز السابق اثنان
أجزاء منفصلة:
- يمكن للمقطع
main.js الذي تصنفه webpack على أنه مقطع initial، والذي
تتضمّن الوحدة main.js و./my-function.js.
- مقطع
async، الذي يتضمن form-validation.js فقط (الذي يحتوي على
تجزئة الملف في اسم المورد في حال إعداده). تم تنزيل هذا المقطع فقط.
إذا كانت قيمة condition ثابتة
تتيح لك هذه الإعدادات تأجيل تحميل مجموعة "form-validation.js" حتى
مطلوبة بالفعل. يمكن أن يؤدي ذلك إلى تحسين استجابة التحميل من خلال تقليل النص البرمجي
التقييم أثناء التحميل الأولي للصفحة. تنزيل النص البرمجي وتقييمه
للمقطع form-validation.js عندما يتم استيفاء شرط محدد، في
وفي هذه الحالة، يتم تنزيل الوحدة النمطية التي يتم استيرادها ديناميكيًا. قد يكون أحد الأمثلة
شرط يتم فيه تنزيل رمز polyfill لمتصفّح معيّن فقط، أو - كما في
المثال السابق - الوحدة التي تم استيرادها ضرورية لتفاعل المستخدم.
من ناحية أخرى، يؤدي تغيير إعدادات SplitChunksPlugin لتحديد
تضمن chunks: initial تقسيم الرمز على الأجزاء الأولية فقط. وهي
مثل تلك المستوردة بشكل ثابت، أو المدرجة في entry من حزمة الويب
. بالنظر إلى المثال السابق، سيكون المقطع الناتج
form-validation.js و main.js في ملف نص برمجي واحد،
ما قد يؤدي إلى تدهور أداء التحميل الأولي للصفحة.
يمكن أيضًا ضبط خيارات SplitChunksPlugin لفصل القيم الأكبر.
نصوص برمجية إلى عدة نصوص أصغر، مثلاً باستخدام الخيار maxSize
توجيه حزمة الويب لتقسيم المجموعات إلى ملفات منفصلة إذا تجاوزت
المحددة بواسطة maxSize. يمكن أن يؤدي تقسيم ملفات النصوص البرمجية الكبيرة إلى ملفات أصغر
تحسين استجابة التحميل، كما هو الحال في بعض الحالات مع تقييم النصوص البرمجية الذي يكلف وحدة المعالجة المركزية (CPU)
وتقسيم العمل إلى مهام أصغر، والتي من غير المرجح أن تمنع
لفترات زمنية أطول.
بالإضافة إلى ذلك، يعني إنشاء ملفات JavaScript أكبر أن النصوص البرمجية
من المرجح أن يعانون من إبطال ذاكرة التخزين المؤقت. على سبيل المثال، إذا كنت تشحن
ونص برمجي كبير مع كلٍّ من رمز إطار العمل ورمز تطبيق الطرف الأول،
يمكن إلغاء صلاحية الحِزمة إذا تم تحديث إطار العمل فقط، ولكن لا شيء آخر في
المورد المجمّع.
من ناحية أخرى، تزيد ملفات النصوص البرمجية الأصغر من احتمالية ظهور
يسترد الزائر الموارد من ذاكرة التخزين المؤقت، مما يؤدي إلى تحميل الصفحة بشكل أسرع على
الزيارات المتكررة. ومع ذلك، تستفيد الملفات الأصغر حجمًا من الضغط بشكل أقل من الملفات الأكبر حجمًا
من المحتمل أن تؤدي إلى زيادة مدة الذهاب والعودة للشبكة في عمليات تحميل الصفحات باستخدام
ذاكرة التخزين المؤقت للمتصفح. يجب توخي الحذر لتحقيق التوازن بين التخزين المؤقت
والكفاءة وفعالية الضغط ووقت تقييم النص البرمجي.
الإصدار التجريبي من webpack
العرض التوضيحي لحزمة الويب SplitChunksPlugin.
اختبِر معلوماتك
نوع عبارة import المستخدم عند تنفيذ الرمز البرمجي
تقسيم؟
import() ديناميكي
إجابة صحيحة.
قيمة import ثابتة
يُرجى إعادة المحاولة.
أيّ نوع من عبارة import يجب أن يكون في الأعلى
من وحدة جافا سكريبت وليس في مكان آخر؟
import() ديناميكي
يُرجى إعادة المحاولة.
قيمة import ثابتة
إجابة صحيحة.
عند استخدام SplitChunksPlugin في حزمة الويب، ما هي
الفرق بين مقطع async
مقطع initial؟
تم تحميل async مجموعة باستخدام السمة import() الديناميكية.
وinitial مجموعة باستخدام
import
إجابة صحيحة.
يتم تحميل async مجموعة باستخدام القيمة import الثابتة.
وinitial مجموعة باستخدام الخصائص الديناميكية
import()
يُرجى إعادة المحاولة.
التالي: صور التحميل الكسول وعناصر
