Cache

cache

boolean object

يُخزِّن وحدات webpack و chunks المُولَّدة في الذاكرة المؤقَّتة لتحسين سرعة البناء. cache: true اختصارٌ لـ cache: { type: 'memory' }. ولتعطيل التخزين المؤقَّت مرِّر false:

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

webpack.config.js

export default {
  // ...
  cache: false,
};

أمّا ضبط cache.type على 'filesystem' فيفتح أمامك خيارات تخصيص أكثر.

cache.allowCollectingMemory

اجمع الذاكرة غير المستعمَلة التي خُصِّصت أثناء فكّ التسلسل (deserialization)، وهو خيار لا يتوفّر إلا حين يُضبط cache.type على 'filesystem'. ويتطلّب نسخ البيانات إلى buffers أصغر، وله تكلفته على الأداء.

• النوع: boolean

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

• 5.35.0+

webpack.config.js

export default {
  cache: {
    type: "filesystem",
    allowCollectingMemory: true,
  },
};

cache.buildDependencies

object

cache.buildDependencies كائن يحوي مصفوفات من اعتماديات الشيفرة الإضافية للبناء. يستعمل webpack hash لكلّ عنصر منها مع كلّ اعتمادياتها لإبطال الذاكرة المؤقَّتة على نظام الملفّات.

القيمة الافتراضية هي webpack/lib لجلب كلّ اعتماديات webpack.

webpack.config.js

import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);

export default {
  cache: {
    buildDependencies: {
      // هذا يجعل كلّ اعتماديات هذا الملفّ اعتماديات بناء
      config: [__filename],
      // افتراضياً، يُعدّ webpack والـ loaders اعتماديات بناء
    },
  },
};

cache.cacheDirectory

string

المجلَّد الأساسي للذاكرة المؤقَّتة. القيمة الافتراضية هي node_modules/.cache/webpack.

لا يتوفّر الخيار cache.cacheDirectory إلا حين يُضبط cache.type على 'filesystem'.

webpack.config.js

import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  // ...
  cache: {
    type: "filesystem",
    cacheDirectory: path.resolve(__dirname, ".temp_cache"),
  },
};

cache.cacheLocation

string

موقع الذاكرة المؤقَّتة. القيمة الافتراضية هي path.resolve(cache.cacheDirectory, cache.name).

webpack.config.js

import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  // ...
  cache: {
    type: "filesystem",
    cacheLocation: path.resolve(__dirname, ".test_cache"),
  },
};

cache.cacheUnaffected

يُخزِّن في الذاكرة المؤقَّتة حساب الوحدات التي لم تتغيّر، والتي تُشير إلى وحدات لم تتغيّر هي الأخرى. ولا يمكن استعماله إلا مع cache.type المضبوطة على 'memory'، فضلاً عن ذلك يلزم تفعيل experiments.cacheUnaffected قبل استعماله.

• النوع: boolean
• v5.54.0+

webpack.config.js

export default {
  // ...
  cache: {
    type: "memory",
    cacheUnaffected: true,
  },
};

cache.compression

false | 'gzip' | 'brotli'

نوع الضغط المستعمَل لملفّات الذاكرة المؤقَّتة. القيمة الافتراضية false.

لا يتوفّر الخيار cache.compression إلا حين يُضبط cache.type على 'filesystem'.

webpack.config.js

export default {
  // ...
  cache: {
    type: "filesystem",
    compression: "gzip",
  },
};

cache.hashAlgorithm

string

الخوارزمية المستعمَلة لتوليد الـ hash. اطّلع على Node.js crypto لمزيد من التفاصيل. القيمة الافتراضية md4.

لا يتوفّر الخيار cache.hashAlgorithm إلا حين يُضبط cache.type على 'filesystem'.

webpack.config.js

export default {
  // ...
  cache: {
    type: "filesystem",
    hashAlgorithm: "md4",
  },
};

cache.idleTimeout

number = 60000

الزمن بالميلي ثانية. يُحدِّد cache.idleTimeout المدّة التي يتمّ بعدها حفظ الذاكرة المؤقَّتة.

لا يتوفّر الخيار cache.idleTimeout إلا حين يُضبط cache.type على 'filesystem'.

webpack.config.js

export default {
  // ..
  cache: {
    type: "filesystem",
    idleTimeout: 60000,
  },
};

cache.idleTimeoutAfterLargeChanges

number = 1000

الزمن بالميلي ثانية. cache.idleTimeoutAfterLargeChanges هو المدّة التي يتمّ بعدها حفظ الذاكرة المؤقَّتة عند رصد تغييرات كبيرة.

لا يتوفّر الخيار cache.idleTimeoutAfterLargeChanges إلا حين يُضبط cache.type على 'filesystem'.

webpack.config.js

export default {
  // ..
  cache: {
    type: "filesystem",
    idleTimeoutAfterLargeChanges: 1000,
  },
};

cache.idleTimeoutForInitialStore

number = 5000

الزمن بالميلي ثانية. cache.idleTimeoutForInitialStore هو المدّة التي يتمّ بعدها حفظ الذاكرة المؤقَّتة الأوّل.

لا يتوفّر الخيار cache.idleTimeoutForInitialStore إلا حين يُضبط cache.type على 'filesystem'.

webpack.config.js

export default {
  // ..
  cache: {
    type: "filesystem",
    idleTimeoutForInitialStore: 0,
  },
};

cache.managedPaths

[string] = ['./node_modules']

cache.managedPaths مصفوفة من المسارات التي لا يديرها سوى مدير حزم. وسيتجنّب webpack عمل hash أو timestamp لها، ويفترض أنّ الإصدار فريد، وسيستعمله بوصفه لقطة (سواء للذاكرة المؤقَّتة في الذاكرة أو على نظام الملفّات).

cache.maxAge

number = 5184000000

المدّة بالميلي ثانية التي يُسمح فيها لمدخلات الذاكرة المؤقَّتة غير المستعمَلة بالبقاء في ذاكرة نظام الملفّات؛ القيمة الافتراضية شهر واحد.

لا يتوفّر الخيار cache.maxAge إلا حين يُضبط cache.type على 'filesystem'.

webpack.config.js

export default {
  // ...
  cache: {
    type: "filesystem",
    maxAge: 5184000000,
  },
};

cache.maxGenerations

number

عرِّف عمر مدخلات الذاكرة المؤقَّتة غير المستعمَلة في ذاكرة الـ memory.

• cache.maxGenerations: 1: تُحذَف مدخلات الذاكرة المؤقَّتة بعد عدم استعمالها لعملية تصريف واحدة.
• cache.maxGenerations: Infinity: تُحفظ المدخلات إلى الأبد.

لا يتوفّر الخيار cache.maxGenerations إلا حين يُضبط cache.type على 'memory'.

webpack.config.js

export default {
  // ...
  cache: {
    type: "memory",
    maxGenerations: Infinity,
  },
};

cache.maxMemoryGenerations

number

عرِّف عمر مدخلات الذاكرة المؤقَّتة غير المستعمَلة في ذاكرة الـ memory.

• cache.maxMemoryGenerations: 0: لن تستعمل الذاكرة المؤقَّتة الدائمة (persistent cache) ذاكرة memory إضافية. ولن تُخزِّن العناصر في الذاكرة إلا إلى حين تسلسلها (serialize) إلى القرص. وحين تُقرأ مجدَّداً ستُفكّ من القرص. هذا الوضع يُقلِّص استعمال الذاكرة إلى أدنى حدّ، لكنه يأتي بكلفة على الأداء.
• cache.maxMemoryGenerations: 1: سيُنظِّف العناصر من ذاكرة الـ memory بمجرّد تسلسلها وعدم استعمالها لعملية تصريف واحدة على الأقلّ. وحين تُستعمَل مجدَّداً، ستُفكّ من القرص. هذا الوضع يُقلِّص استعمال الذاكرة مع الإبقاء على العناصر النشطة في ذاكرة الـ memory.
• cache.maxMemoryGenerations: الأرقام الصغيرة الأكبر من 0 ستحمل كلفة على الأداء بسبب عملية الـ GC. وتقلّ هذه الكلفة كلّما زاد الرقم.

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

webpack.config.js

export default {
  // ...
  cache: {
    type: "filesystem",
    maxMemoryGenerations: Infinity,
  },
};

cache.memoryCacheUnaffected

يُخزِّن في ذاكرة الـ memory حساب الوحدات التي لم تتغيّر، والتي تُشير إلى وحدات لم تتغيّر هي الأخرى. ولا يمكن استعماله إلا مع cache.type المضبوطة على 'filesystem'، فضلاً عن ذلك يلزم تفعيل experiments.cacheUnaffected قبل استعماله.

• النوع: boolean
• v5.54.0+

webpack.config.js

export default {
  // ...
  cache: {
    type: "filesystem",
    memoryCacheUnaffected: true,
  },
};

cache.name

string

اسم الذاكرة المؤقَّتة. الأسماء المختلفة تؤدّي إلى ذاكرات مؤقَّتة متعايشة. القيمة الافتراضية هي ${config.name}-${config.mode}. ويُجدي cache.name نفعاً حين يكون لديك عدّة تخصيصات ينبغي أن يكون لكلّ منها ذاكرة مؤقَّتة مستقلّة.

لا يتوفّر الخيار cache.name إلا حين يُضبط cache.type على 'filesystem'.

webpack.config.js

export default {
  // ...
  cache: {
    type: "filesystem",
    name: "AppBuildCache",
  },
};

cache.profile

boolean = false

يتعقّب ويُسجِّل معلومات زمنية تفصيلية لكلّ عنصر في الذاكرة المؤقَّتة من نوع 'filesystem'.

webpack.config.js

export default {
  // ...
  cache: {
    type: "filesystem",
    profile: true,
  },
};

cache.readonly

boolean 5.85.0

يمنع webpack من حفظ الذاكرة المؤقَّتة في نظام الملفّات. لا يتوفّر إلا حين تكون cache.type === "filesystem" و cache.store === 'pack'.

export default {
  // ...
  cache: {
    type: "filesystem",
    store: "pack",
    readonly: true,
  },
};

cache.store

string = 'pack': 'pack'

يُخبر cache.store webpack متى يحفظ البيانات في نظام الملفّات.

• 'pack': احفظ البيانات حين يكون المُصرِّف خاملاً في ملفّ واحد يضمّ كلّ العناصر المُخزَّنة مؤقَّتاً.

لا يتوفّر الخيار cache.store إلا حين يُضبط cache.type على 'filesystem'.

webpack.config.js

export default {
  // ...
  cache: {
    type: "filesystem",
    store: "pack",
  },
};

cache.type

string: 'memory' | 'filesystem'

يضبط نوع cache ليكون في الذاكرة أو على نظام الملفّات. الخيار memory بسيط ومباشر، فهو يُخبر webpack بحفظ الذاكرة المؤقَّتة في الذاكرة، ولا يسمح بأيّ تخصيص إضافي:

webpack.config.js

export default {
  // ...
  cache: {
    type: "memory",
  },
};

cache.version

string = ''

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

لا يتوفّر الخيار cache.version إلا حين يُضبط cache.type على 'filesystem'.

webpack.config.js

export default {
  // ...
  cache: {
    type: "filesystem",
    version: "your_version",
  },
};

ضبط الذاكرة المؤقَّتة في أنظمة CI/CD

تتيح ذاكرة نظام الملفّات المؤقَّتة مشاركة الذاكرة المؤقَّتة بين البُنى في CI. ولضبطها:

• يجب أن يدعم نظام الـ CI خيار مشاركة الذاكرة المؤقَّتة بين البُنى.
• يجب أن يُشغِّل الـ CI المهمّة في نفس المسار المطلق، إذ أنّ ملفّات الذاكرة المؤقَّتة في webpack تحفظ مسارات مطلقة.

GitLab CI/CD

قد يبدو التخصيص المعتاد كالآتي:

variables:
  # العودة إلى ذاكرة فرع "main" المؤقَّتة، تتطلّب GitLab Runner 13.4
  CACHE_FALLBACK_KEY: main

# هذه مهمّة بناء webpack
build-job:
  cache:
    key: "$CI_COMMIT_REF_SLUG" # اسم الفرع أو الوسم
    paths:
      # مجلَّد الذاكرة المؤقَّتة
      # تأكّد ألا تُشغِّل "npm ci" في هذه المهمّة ولا أن تُغيِّر مجلَّد الذاكرة المؤقَّتة الافتراضي
      # وإلا فإنّ "npm ci" سيحذف ملفّات الذاكرة المؤقَّتة
      - node_modules/.cache/webpack/

إجراءات جيثب

- uses: actions/cache@v3
  with:
    # مجلَّد الذاكرة المؤقَّتة
    path: node_modules/.cache/webpack/
    key: ${{ GITHUB_REF_NAME }}-webpack-build
    # العودة إلى ذاكرة فرع "main" المؤقَّتة
    restore-keys: |
      main-webpack-build