DllPlugin

يوفر DllPlugin وDllReferencePlugin طريقة لتقسيم bundles بشكل قد يحسّن أداء وقت البناء بدرجة كبيرة. مصطلح "DLL" اختصار لـ Dynamic-link library، وقد ظهر في الأصل من Microsoft.

DllPlugin

يُستخدم هذا plugin داخل إعداد webpack منفصل، وهدفه الوحيد إنشاء bundle خاص بالـ dll. ينشئ ملف manifest.json، ويستخدمه DllReferencePlugin لربط dependencies بمعرّفاتها.

• context (اختياري): سياق requests داخل ملف manifest. القيمة الافتراضية هي سياق webpack.
• format (boolean = false): إذا كانت true، فسيتم تنسيق ملف manifest بصيغة JSON عند إخراجه.
• name: اسم دالة dll التي سيتم كشفها. يدعم TemplatePaths مثل: [fullhash] و[chunkhash] و[contenthash] و[name].
• path: مسار مطلق إلى ملف manifest بصيغة JSON الذي سيتم إخراجه.
• entryOnly (boolean = true): إذا كانت true، فلن يتم كشف إلا entry points.
• type: نوع dll bundle.

new webpack.DllPlugin(options);

ينشئ هذا plugin ملف manifest.json ويكتبه في path المحدد. يحتوي الملف على ربط بين طلبات require وimport وبين module ids. ويستخدمه DllReferencePlugin.

ادمج هذا plugin مع خيار output.library لكشف دالة dll، أي جعلها متاحة في global scope.

DllReferencePlugin

يُستخدم هذا plugin داخل إعداد webpack الأساسي، ويشير إلى dll-only-bundle أو عدة bundles حتى يستعمل dependencies المبنية مسبقًا بدل بنائها من جديد.

• context: (مسار مطلق) سياق requests داخل manifest أو الخاصية content.
• extensions: الامتدادات المستخدمة لحل modules داخل dll bundle. تُستخدم فقط عند استخدام scope.
• manifest: كائن يحتوي على content وname، أو نص يمثل المسار المطلق إلى ملف JSON manifest الذي سيُحمّل أثناء compilation.
• content (اختياري): الربط بين request وmodule id. القيمة الافتراضية هي manifest.content.
• name (اختياري): معرّف المكان الذي كُشف فيه dll. القيمة الافتراضية هي manifest.name. راجع أيضًا externals.
• scope (اختياري): بادئة تُستخدم للوصول إلى محتوى dll.
• sourceType (اختياري): طريقة كشف dll. راجع libraryTarget.

new webpack.DllReferencePlugin(options);

يشير إلى ملف dll manifest لربط أسماء dependencies بـ module ids، ثم يطلبها عند الحاجة باستخدام الدالة الداخلية __webpack_require__.

الأوضاع

يمكن استخدام هذا plugin بطريقتين: scoped و mapped.

وضع Scoped

يمكن الوصول إلى محتوى dll تحت بادئة module. مثلًا، إذا كان scope = 'xyz'، وكان يوجد ملف abc داخل dll، فيمكن الوصول إليه عبر require('xyz/abc').

وضع Mapped

يتم ربط محتوى dll بالمجلد الحالي. إذا تطابق ملف مطلوب مع ملف داخل dll بعد عملية resolving، فسيُستخدم الملف الموجود في dll بدل إدخاله في bundle الرئيسي.

لأن هذا يحدث بعد resolving لكل ملف داخل dll bundle، يجب أن تكون المسارات نفسها متاحة لدى التطبيق الذي يستهلك dll bundle. مثلًا، إذا كان dll يحتوي على lodash والملف abc، فسيتم أخذ import _ from "lodash" أو require('lodash')، وكذلك import abs from "./abc" أو require('./abc')، من dll بدل بنائها داخل bundle الرئيسي.

الاستخدام

webpack.vendor.config.js

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

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

new webpack.DllPlugin({
  context: import.meta.dirname,
  name: "[name]_[fullhash]",
  path: path.join(__dirname, "manifest.json"),
});

webpack.app.config.js

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

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

new webpack.DllReferencePlugin({
  context: __dirname,
  manifest: path.join(__dirname, "manifest.json"),
  scope: "xyz",
  sourceType: "commonjs2",
});

أمثلة

Vendor وUser

مجلدان منفصلان للأمثلة. يوضحان scope وcontext.

المراجع

المصدر

• مصدر DllPlugin
• مصدر DllReferencePlugin
• مصدر DllEntryPlugin
• مصدر DllModuleFactory
• مصدر ManifestPlugin

الاختبارات

• اختبار إنشاء DllPlugin
• اختبار DllPlugin بدون scope
• اختبار استخدام DllReferencePlugin مع Dll