Performance

تتيح لك هذه الخيارات التحكّم بالكيفية التي يُنبّهك بها webpack حين تتجاوز الـ assets أو نقاط الدخول حدّاً معيّناً من الحجم. وقد استوحينا هذه الميزة من فكرة ميزانيات الأداء في webpack.

performance

object

اضبط من هنا الطريقة التي تَظهر بها تلميحات الأداء. مثلاً، إن كان لديك asset يتجاوز 250 كيلوبايت، فإنّ webpack سيُطلق تحذيراً يُنبّهك إلى ذلك.

performance.assetFilter

function(assetFilename) => boolean

تمنح هذه الخاصية webpack القدرة على تحديد الملفات التي تدخل في حساب تلميحات الأداء. والدالّة الافتراضية هي:

function assetFilter(assetFilename) {
  return !/\.map$/.test(assetFilename);
}

ويمكنك تجاوز هذه الخاصية بتمرير دالّتك الخاصة:

export default {
  // ...
  performance: {
    assetFilter(assetFilename) {
      return assetFilename.endsWith(".js");
    },
  },
};

في المثال السابق، لن تُعطى تلميحات الأداء إلا بناءً على ملفّات .js وحدها.

performance.hints

string: 'error' | 'warning' boolean: false

يُفعّل التلميحات أو يُعطّلها. كذلك يُخبر webpack هل ينبغي إطلاق خطأ أم تحذير عند العثور على ما يستوجب تلميحاً.

تعتمد القيمة الافتراضية لـ performance.hints على mode:

لنفترض أنّ هناك asset حجمه يتعدّى 250 كيلوبايت:

export default {
  // ...
  performance: {
    hints: false,
  },
};

عندها لن تظهر تحذيرات ولا أخطاء.

export default {
  // ...
  performance: {
    hints: "warning",
  },
};

سيُعرض تحذير يُنبّهك إلى أنّ هناك asset كبير الحجم. ونحن ننصح بهذا الإعداد في بيئات التطوير.

export default {
  // ...
  performance: {
    hints: "error",
  },
};

سيُعرض خطأ يُنبّهك إلى أنّ هناك asset ضخماً. ونحن نُفضّل أن تستخدم hints: "error" في بُنى الإنتاج، تجنّباً لنشر حزم إنتاج كبيرة الحجم تُؤثّر سلباً في أداء الصفحة.

performance.maxAssetSize

number = 250000

الـ asset هو أي ملف يُخرجه webpack. ويتحكّم هذا الخيار في اللحظة التي يُطلق فيها webpack تلميح أداء بناءً على حجم الـ asset الفردي بالبايتات.

export default {
  // ...
  performance: {
    maxAssetSize: 100000,
  },
};

performance.maxEntrypointSize

number = 250000

تُمثّل نقطة الدخول مجموع الـ assets التي ستُستخدم في وقت التحميل الأوّل لتلك النقطة بعينها. ويتحكّم هذا الخيار في اللحظة التي يُطلق فيها webpack تلميحات الأداء استناداً إلى الحدّ الأقصى لحجم نقطة الدخول بالبايتات.

export default {
  // ...
  performance: {
    maxEntrypointSize: 400000,
  },
};