Optimization

يقوم webpack بإجراء تحسينات لك اعتمادًا على mode الذي تم اختياره، ولا تزال جميع التحسينات متاحة للتخصيص اليدوي والتجاوزات.

optimization.checkWasmTypes

boolean

يخبر webpack بالتحقق من الأنواع غير المتوافقة من WebAssembly modules عند استيرادها/تصديرها.

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

webpack.config.js

export default {
  // ...
  optimization: {
    checkWasmTypes: false,
  },
};

optimization.chunkIds

boolean: false string: 'natural' | 'named' | 'size' | 'total-size' | 'deterministic'

• false: تعطيل خوارزمية معرف chunk المضمنة في webpack
• إحدى القيم التالية:
  • 'natural'
  • 'named'
  • 'size'
  • 'total-size'
  • 'deterministic'

يخبر webpack أي الخوارزمية يجب استخدامها لمعرفات chunk. يؤدي ضبط optimization.chunkIds إلى false إلى إخبار webpack بأنه لا ينبغي استخدام أي من الخوارزميات المضمنة، حيث يمكن توفير خوارزمية مخصصة عبر plugin. هناك بضعة إعدادات افتراضية لـ optimization.chunkIds:

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

يتم دعم قيم string التالية:

webpack.config.js

export default {
  // ...
  optimization: {
    chunkIds: "named",
  },
};

افتراضيًا، يتم استخدام الحد الأدنى لطول 3 أرقام عند ضبط optimization.chunkIds على 'deterministic'. لتجاوز السلوك الافتراضي، اضبط optimization.chunkIds على false واستخدم webpack.ids.DeterministicChunkIdsPlugin.

webpack.config.js

export default {
  // ...
  optimization: {
    chunkIds: false,
  },
  plugins: [
    new webpack.ids.DeterministicChunkIdsPlugin({
      maxLength: 5,
    }),
  ],
};

optimization.concatenateModules

boolean

يخبر webpack بالعثور على أجزاء من الرسم البياني module والتي يمكن ربطها بأمان في module واحد. يعتمد على optimization.providedExports وoptimization.usedExports.

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

webpack.config.js

export default {
  // ...
  optimization: {
    concatenateModules: true,
  },
};

optimization.emitOnErrors

boolean

استخدم optimization.emitOnErrors لإصدار assets عندما تكون هناك أخطاء أثناء التجميع. وهذا يضمن انبعاث الخطأ assets. يتم إصدار أخطاء فادحة في التعليمات البرمجية التي تم إنشاؤها وسوف تسبب أخطاء في runtime.

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

webpack.config.js

export default {
  // ...
  optimization: {
    emitOnErrors: true,
  },
};

optimization.avoidEntryIife

boolean

استخدم optimization.avoidEntryIife ...

في الوقت الحالي، يمكن لـ optimization.avoidEntryIife فقط تحسين entry module مع modules أخرى.

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

webpack.config.js

export default {
  // ...
  optimization: {
    avoidEntryIife: true,
  },
};

optimization.flagIncludedChunks

boolean

يخبر webpack بتحديد ووضع علامة على chunks وهي مجموعات فرعية من chunks أخرى بطريقة لا يلزم تحميل المجموعات الفرعية عندما يكون chunk الأكبر قد تم تحميله بالفعل.

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

webpack.config.js

export default {
  // ...
  optimization: {
    flagIncludedChunks: true,
  },
};

optimization.innerGraph

boolean

optimization.innerGraph يخبر webpack ما إذا كان سيتم إجراء تحليل الرسم البياني الداخلي للصادرات غير المستخدمة.

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

webpack.config.js

export default {
  // ...
  optimization: {
    innerGraph: false,
  },
};

optimization.mangleExports

boolean string: 'deterministic' | 'size'

optimization.mangleExports يسمح بالتحكم في تشويه التصدير.

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

يتم دعم القيم التالية:

webpack.config.js

export default {
  // ...
  optimization: {
    mangleExports: true,
  },
};

optimization.mangleWasmImports

boolean = false

عند التعيين على true، يطلب من webpack تقليل حجم WASM عن طريق تغيير الواردات إلى سلاسل أقصر. إنه يشوه module ويصدر الأسماء.

webpack.config.js

export default {
  // ...
  optimization: {
    mangleWasmImports: true,
  },
};

optimization.mergeDuplicateChunks

boolean = true

يخبر webpack بدمج chunks التي تحتوي على نفس modules. سيؤدي ضبط optimization.mergeDuplicateChunks على false إلى تعطيل optimization هذا.

webpack.config.js

export default {
  // ...
  optimization: {
    mergeDuplicateChunks: false,
  },
};

optimization.minimize

boolean

أخبر webpack بتصغير bundle باستخدام MinimizerPlugin أو plugin(s) المحددة في optimization.minimizer.

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

webpack.config.js

export default {
  // ...
  optimization: {
    minimize: false,
  },
};

optimization.minimizer

[MinimizerPlugin] و أو [function (compiler)] أو undefined | null | 0 | false | ""

يسمح لك بتجاوز أداة التصغير الافتراضية من خلال توفير مثيلات مختلفة أو أكثر مخصصة من MinimizerPlugin. بدءًا من webpack 5.87.0، يمكن استخدام القيم الزائفة لتعطيل أدوات تصغير محددة بشكل مشروط.

webpack.config.js

import MinimizerPlugin from "minimizer-webpack-plugin";

export default {
  optimization: {
    minimizer: [
      new MinimizerPlugin({
        parallel: true,
        minimizerOptions: {
          // https://github.com/webpack/minimizer-webpack-plugin#minimizeroptions
        },
      }),
    ],
  },
};

أو function:

import MinimizerPlugin from "minimizer-webpack-plugin";

export default {
  optimization: {
    minimizer: [
      (compiler) => {
        new MinimizerPlugin({
          /* your config */
        }).apply(compiler);
      },
    ],
  },
};

افتراضيًا، يقوم webpack بتعيين optimization.minimizer على القيمة التالية:

import MinimizerPlugin from "minimizer-webpack-plugin";

const minimizer = [
  {
    apply: (compiler) => {
      new MinimizerPlugin({
        minimizerOptions: {
          compress: {
            passes: 2,
          },
        },
      }).apply(compiler);
    },
  },
];

والتي يمكن الوصول إليها باستخدام '...' في حالة رغبتك في الاحتفاظ بها عند تخصيص optimization.minimizer:

export default {
  optimization: {
    minimizer: [new CssMinimizer(), "..."],
  },
};

في الأساس، '...' هو اختصار للوصول إلى قيمة التخصيص الافتراضية webpack الذي سيتم تعيينه لنا.

optimization.moduleIds

boolean: false string: 'natural' | 'named' | 'deterministic' | 'size'

يخبر webpack بالخوارزمية التي يجب استخدامها عند اختيار معرفات module. يؤدي ضبط optimization.moduleIds إلى false إلى إخبار webpack بأنه لا ينبغي استخدام أي من الخوارزميات المضمنة، حيث يمكن توفير خوارزمية مخصصة عبر plugin.

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

يتم دعم قيم string التالية:

webpack.config.js

export default {
  // ...
  optimization: {
    moduleIds: "deterministic",
  },
};

يعد خيار deterministic مفيدًا على المدى الطويل caching، ولكنه لا يزال ينتج عنه bundles أصغر مقارنة بـ hashed. يتم اختيار طول القيمة الرقمية لملء 80% من مساحة المعرف كحد أقصى. افتراضيًا، يتم استخدام الحد الأدنى لطول 3 أرقام عند ضبط optimization.moduleIds على deterministic. لتجاوز السلوك الافتراضي، قم بتعيين optimization.moduleIds إلى false واستخدم webpack.ids.DeterministicModuleIdsPlugin.

webpack.config.js

export default {
  // ...
  optimization: {
    moduleIds: false,
  },
  plugins: [
    new webpack.ids.DeterministicModuleIdsPlugin({
      maxLength: 5,
    }),
  ],
};

optimization.nodeEnv

boolean: false string

يخبر webpack بضبط process.env.NODE_ENV على قيمة string معينة. يستخدم optimization.nodeEnv DefinePlugin ما لم يتم ضبطه على false.

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

القيم المحتملة:

• أي string: القيمة المراد ضبط process.env.NODE_ENV عليها.
• خطأ: لا تقم بتعديل/ضبط قيمة process.env.NODE_ENV.

webpack.config.js

export default {
  // ...
  optimization: {
    nodeEnv: "production",
  },
};

optimization.portableRecords

boolean

optimization.portableRecords يخبر webpack بإنشاء سجلات ذات مسارات نسبية لتتمكن من نقل مجلد السياق.

بشكل افتراضي، يتم تعطيل optimization.portableRecords. يتم تمكينه تلقائيًا إذا تم توفير خيار واحد على الأقل من خيارات السجلات لتخصيص webpack: recordsPath، recordsInputPath، recordsOutputPath.

webpack.config.js

export default {
  // ...
  optimization: {
    portableRecords: true,
  },
};

optimization.providedExports

boolean

يخبر webpack بمعرفة عمليات التصدير التي يتم توفيرها بواسطة modules لإنشاء تعليمات برمجية أكثر كفاءة لـ export * from .... بشكل افتراضي، يتم تمكين optimization.providedExports.

webpack.config.js

export default {
  // ...
  optimization: {
    providedExports: false,
  },
};

optimization.realContentHash

boolean

يضيف تمريرة hash compilation إضافية بعد معالجة assets للحصول على تجزئات محتوى asset الصحيحة. إذا تم ضبط realContentHash على false، فسيتم استخدام البيانات الداخلية لحساب hash ويمكن أن تتغير عندما يكون assets متطابقًا.

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

webpack.config.js

export default {
  // ...
  optimization: {
    realContentHash: false,
  },
};

optimization.removeAvailableModules

boolean = false

يخبر webpack باكتشاف وإزالة modules من chunks عندما تكون هذه modules مدرجة بالفعل في جميع الآباء. سيؤدي ضبط optimization.removeAvailableModules على true إلى تمكين optimization هذا.

webpack.config.js

export default {
  // ...
  optimization: {
    removeAvailableModules: true,
  },
};

optimization.removeEmptyChunks

boolean = true

يخبر webpack باكتشاف وإزالة chunks الفارغة. سيؤدي ضبط optimization.removeEmptyChunks على false إلى تعطيل optimization هذا.

webpack.config.js

export default {
  // ...
  optimization: {
    removeEmptyChunks: false,
  },
};

optimization.runtimeChunk

object string boolean

يؤدي ضبط optimization.runtimeChunk إلى true أو 'multiple' إلى إضافة chunk إضافي يحتوي على runtime فقط لكل نقطة إدخال. هذا الإعداد هو اسم مستعار لـ:

webpack.config.js

export default {
  // ...
  optimization: {
    runtimeChunk: {
      name: (entrypoint) => `runtime~${entrypoint.name}`,
    },
  },
};

بدلاً من ذلك، تقوم القيمة 'single' بإنشاء ملف runtime لمشاركته مع كافة ملفات chunks التي تم إنشاؤها. هذا الإعداد هو اسم مستعار لـ:

webpack.config.js

export default {
  // ...
  optimization: {
    runtimeChunk: {
      name: "runtime",
    },
  },
};

من خلال ضبط optimization.runtimeChunk على object، يكون من الممكن فقط توفير الخاصية name التي تمثل الاسم أو مصنع الاسم لـ runtime chunks.

الافتراضي هو false: يقوم كل entry chunk بتضمين runtime.

webpack.config.js

export default {
  // ...
  optimization: {
    runtimeChunk: {
      name: (entrypoint) => `runtimechunk~${entrypoint.name}`,
    },
  },
};

optimization.sideEffects

boolean string: 'flag'

يخبر webpack بالتعرف على علامة sideEffects في package.json أو قواعد التخطي فوق modules التي تم وضع علامة عليها بحيث لا تحتوي على أي آثار جانبية عند عدم استخدام عمليات التصدير.

package.json

{
  "name": "awesome npm module",
  "version": "1.0.0",
  "sideEffects": false
}

يعتمد optimization.sideEffects على optimization.providedExports ليتم تمكينه. هذا dependency له تكلفة زمنية build، ولكن إزالة modules له تأثير إيجابي على performance بسبب انخفاض توليد التعليمات البرمجية. تأثير هذا optimization يعتمد على قاعدة التعليمات البرمجية الخاصة بك، جربه لاحتمال فوز performance.

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

webpack.config.js

export default {
  // ...
  optimization: {
    sideEffects: true,
  },
};

لاستخدام العلامة اليدوية فقط وعدم تحليل كود المصدر:

export default {
  // ...
  optimization: {
    sideEffects: "flag",
  },
};

optimization.splitChunks

object

بشكل افتراضي، يوفر webpack v4+ إستراتيجيات chunks مشتركة جديدة خارج الصندوق لـ modules المستوردة ديناميكيًا. راجع الخيارات المتاحة لتخصيص هذا السلوك في صفحة SplitChunksPlugin.

optimization.usedExports

boolean string: 'global'

يخبر webpack لتحديد الصادرات المستخدمة لكل module. هذا يعتمد على optimization.providedExports. يتم استخدام المعلومات التي تم جمعها بواسطة optimization.usedExports من خلال تحسينات أخرى أو إنشاء تعليمات برمجية، أي أنه لا يتم إنشاء الصادرات للصادرات غير المستخدمة، ويتم تشويه أسماء التصدير إلى معرفات حرف واحد عندما تكون جميع الاستخدامات متوافقة. ستستفيد عملية إزالة التعليمات البرمجية الميتة في أدوات التصغير من هذا ويمكنها إزالة عمليات التصدير غير المستخدمة.

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

webpack.config.js

export default {
  // ...
  optimization: {
    usedExports: false,
  },
};

لإلغاء الاشتراك في تحليل الصادرات المستخدمة لكل runtime:

export default {
  // ...
  optimization: {
    usedExports: "global",
  },
};