ProgressPlugin

يوفّر ProgressPlugin طريقة لتخصيص كيفية عرض تقدم عملية التجميع أثناء عمل webpack.

الاستخدام

أنشئ instance من ProgressPlugin ومرر له أحد المعاملات المدعومة. توجد أيضًا دالة static باسم createDefaultHandler يمكنك استخدامها لتخصيص handler الافتراضي.

تمرير function

يمكنك تمرير handler function تُستدعى عندما ترسل hooks معلومات عن التقدم. تستقبل دالة handler المعاملات التالية:

• percentage: رقم بين 0 و1 يوضح نسبة اكتمال التجميع.
• message: وصف قصير للـ hook الذي يعمل حاليًا.
• ...args: صفر أو أكثر من strings إضافية توضّح حالة التقدم الحالية.

const handler = (percentage, message, ...args) => {
  // e.g. Output each progress message directly to the console:
  console.info(percentage, message, ...args);
};

new webpack.ProgressPlugin(handler);

تمرير object

عند تمرير object إلى ProgressPlugin، تدعم الخصائص التالية:

• activeModules (boolean = false): يعرض عدد active modules واسم module نشط واحد داخل رسالة التقدم.
• entries (boolean = true): يعرض عدد entries داخل رسالة التقدم.
• handler: راجع تمرير function.
• modules (boolean = true): يعرض عدد modules داخل رسالة التقدم.
• modulesCount (number = 5000): أقل عدد modules يبدأ منه العرض. يعمل عندما تكون خاصية modules مفعّلة.
• profile (boolean = false): يطلب من ProgressPlugin جمع profile data لخطوات التقدم.
• dependencies (boolean = true): يعرض عدد dependencies داخل رسالة التقدم.
• dependenciesCount (number = 10000): أقل عدد dependencies يبدأ منه العرض. يعمل عندما تكون خاصية dependencies مفعّلة.
• percentBy (string = null: 'entries' | 'dependencies' | 'modules' | null): يحدد الطريقة التي يستخدمها ProgressPlugin لحساب نسبة التقدم.

new webpack.ProgressPlugin({
  activeModules: false,
  entries: true,
  handler(percentage, message, ...args) {
    // custom logic
  },
  modules: true,
  modulesCount: 5000,
  profile: false,
  dependencies: true,
  dependenciesCount: 10000,
  percentBy: null,
});

webpack.ProgressPlugin.createDefaultHandler

إذا لم يكن handler الافتراضي في ProgressPlugin مناسبًا لاحتياجك، يمكنك تخصيصه باستخدام الدالة static ProgressPlugin.createDefaultHandler.

static createDefaultHandler: (
  profile: undefined | null | boolean,
  logger: WebpackLogger
) => (percentage: number, msg: string, ...args: string[]) => void;

حساب النسبة المئوية

افتراضيًا، تُحسب نسبة التقدم اعتمادًا على عدد modules التي تم بناؤها مقارنة بإجمالي عدد modules: built / total.

عدد modules الإجمالي غير معروف مسبقًا ويتغير أثناء البناء. لهذا السبب قد تكون نسبة التقدم غير دقيقة أحيانًا.

لحل هذه المشكلة، يخزن ProgressPlugin آخر عدد معروف لإجمالي modules ويعيد استخدام هذه القيمة في البناء التالي. أول عملية بناء تجهّز cache، أما العمليات اللاحقة فتستخدم هذه القيمة وتحدّثها.

نوصي باستخدام الإعداد percentBy: 'entries' في المشاريع التي تحتوي عدة entry points مضبوطة. تصبح نسبة التقدم أدق لأن عدد entry points معروف مسبقًا.

Hooks المدعومة

تُرسل hooks التالية معلومات التقدم إلى ProgressPlugin.

Compiler

• compilation
• emit*
• afterEmit*
• done

Compilation

• buildModule
• failedModule
• succeedModule
• finishModules*
• seal*
• optimizeDependenciesBasic*
• optimizeDependencies*
• optimizeDependenciesAdvanced*
• afterOptimizeDependencies*
• optimize*
• optimizeModulesBasic*
• optimizeModules*
• optimizeModulesAdvanced*
• afterOptimizeModules*
• optimizeChunksBasic*
• optimizeChunks*
• optimizeChunksAdvanced*
• afterOptimizeChunks*
• optimizeTree*
• afterOptimizeTree*
• optimizeChunkModulesBasic*
• optimizeChunkModules*
• optimizeChunkModulesAdvanced*
• afterOptimizeChunkModules*
• reviveModules*
• optimizeModuleOrder*
• advancedOptimizeModuleOrder*
• beforeModuleIds*
• moduleIds*
• optimizeModuleIds*
• afterOptimizeModuleIds*
• reviveChunks*
• optimizeChunkOrder*
• beforeChunkIds*
• optimizeChunkIds*
• afterOptimizeChunkIds*
• recordModules*
• recordChunks*
• beforeHash*
• afterHash*
• recordHash*
• beforeModuleAssets*
• beforeChunkAssets*
• additionalChunkAssets*
• record*
• additionalAssets*
• optimizeChunkAssets*
• afterOptimizeChunkAssets*
• optimizeAssets*
• afterOptimizeAssets*
• afterSeal*

المصدر

• مصدر ProgressPlugin