بيانات Stats

عند تجميع الكود باستخدام webpack، يمكنك إنشاء ملف JSON يحتوي إحصاءات عن modules وchunks وassets. تساعدك هذه البيانات على فهم dependency graph الخاص بالتطبيق، وعلى تحسين سرعة التجميع. غالبًا يُنشأ الملف بالأمر التالي من CLI:

npx webpack --profile --json=compilation-stats.json

يخبر flag --json=compilation-stats.json webpack أن ينشئ ملف compilation-stats.json وفيه dependency graph ومعلومات أخرى عن عملية البناء. وغالبًا يُضاف flag --profile أيضًا حتى يضيف webpack قسم profile داخل كل كائن من modules، وفيه إحصاءات خاصة بتجميع ذلك module.

البنية

بنية ملف JSON على المستوى الأعلى مباشرة نسبيًا، لكنها تحتوي أيضًا بعض البنى المتداخلة. لكل بنية متداخلة قسم مستقل أدناه حتى يسهل فهم الملف. يمكنك الضغط على الروابط داخل البنية العامة التالية للانتقال إلى الأقسام المرتبطة:

{
  "version": "5.9.0", // إصدار webpack المستخدم في التجميع
  "hash": "11593e3b3ac85436984a", // hash خاص بعملية التجميع
  "time": 2469, // وقت التجميع بالميلي ثانية
  "publicPath": "auto",
  "outputPath": "/", // مسار مجلد إخراج webpack
  "assetsByChunkName": {
    // ربط اسم chunk بالـ asset أو assets الناتجة عنه
    "main": ["web.js?h=11593e3b3ac85436984a"],
    "named-chunk": ["named-chunk.web.js"],
    "other-chunk": ["other-chunk.js", "other-chunk.css"]
  },
  "assets": [
    // قائمة بكائنات asset
  ],
  "chunks": [
    // قائمة بكائنات chunk
  ],
  "modules": [
    // قائمة بكائنات module
  ],
  "entryPoints": {
    // قائمة بكائنات entry
  },
  "errors": [
    // قائمة بكائنات error
  ],
  "errorsCount": 0, // عدد الأخطاء
  "warnings": [
    // قائمة بكائنات warning
  ],
  "warningsCount": 0 // عدد التحذيرات
}

كائنات Asset

يمثل كل كائن داخل assets ملف output أنشأته عملية التجميع. تتبع هذه الكائنات بنية متشابهة:

{
  "chunkNames": [], // أسماء chunks التي يحتويها هذا asset
  "chunks": [10, 6], // IDs الخاصة بالـ chunks التي يحتويها هذا asset
  "comparedForEmit": false, // هل تمت مقارنة asset مع الملف نفسه في نظام ملفات الإخراج
  "emitted": true, // هل وصل asset إلى مجلد `output`
  "name": "10.web.js", // اسم ملف `output`
  "size": 1058, // حجم الملف بالبايت
  "info": {
    "immutable": true, // هل يمكن تخزين asset في cache طويل المدى لأنه يحتوي hash
    "size": 1058, // الحجم بالبايت، ولا يظهر إلا بعد إخراج asset
    "development": true, // هل يُستخدم asset للتطوير فقط ولا يُحسب ضمن assets التي يراها المستخدم
    "hotModuleReplacement": true, // هل يحمل asset بيانات لتحديث تطبيق موجود باستخدام HMR
    "sourceFilename": "originalfile.js", // اسم ملف المصدر عندما يُنشأ asset من ملف source، وقد يكون محوّلًا
    "javascriptModule": true // true إذا كان asset ملف JavaScript وبصيغة ESM
  }
}

كائنات Chunk

يمثل كل كائن داخل chunks مجموعة modules تُسمى chunk. تتبع كل كائنات chunk البنية التالية:

{
  "entry": true, // هل يحتوي chunk على webpack runtime
  "files": [
    // array من أسماء الملفات التي تحتوي هذا chunk
  ],
  "filteredModules": 0, // راجع الوصف في [البنية](#البنية) أعلاه
  "id": 0, // ID الخاص بهذا chunk
  "initial": true, // هل يُحمّل هذا chunk عند فتح الصفحة لأول مرة أم [عند الطلب](/guides/lazy-loading)
  "modules": [
    // قائمة [كائنات module](#كائنات-module)
    "web.js?h=11593e3b3ac85436984a"
  ],
  "names": [
    // قائمة أسماء chunks الموجودة داخل هذا chunk
  ],
  "origins": [
    // راجع الوصف أدناه
  ],
  "parents": [], // IDs الخاصة بالـ parent chunks
  "rendered": true, // هل مر chunk بمرحلة Code Generation
  "size": 188057 // حجم chunk بالبايت
}

يحتوي كائن chunks أيضًا قائمة origins توضّح كيف نشأ هذا chunk. يتبع كل كائن داخل origins الشكل التالي:

{
  "loc": "", // أسطر الكود التي أنشأت هذا chunk
  "module": "(webpack)\\test\\browsertest\\lib\\index.web.js", // مسار module
  "moduleId": 0, // ID الخاص بالـ module
  "moduleIdentifier": "(webpack)\\test\\browsertest\\lib\\index.web.js", // مسار module
  "moduleName": "./lib/index.web.js", // المسار النسبي للـ module
  "name": "main", // اسم chunk
  "reasons": [
    // قائمة بنفس كائنات `reasons` الموجودة في [كائنات module](#كائنات-module)
  ]
}

كائنات Module

لن تكون الإحصاءات مفيدة دون وصف modules الفعلية داخل التطبيق المجمع. يمثل كل module في dependency graph بالبنية التالية:

{
  "assets": [
    // قائمة [كائنات asset](#كائنات-asset)
  ],
  "built": true, // هل مر module عبر [Loaders](/concepts/loaders) ثم Parsing ثم Code Generation
  "cacheable": true, // هل يمكن تخزين هذا module في cache
  "chunks": [
    // IDs الخاصة بالـ chunks التي تحتوي هذا module
  ],
  "errors": 0, // عدد الأخطاء أثناء حل module أو معالجته
  "failed": false, // هل فشل التجميع عند هذا module
  "id": 0, // ID الخاص بالـ module، ويشبه [`module.id`](/api/module-variables/#moduleid-commonjs)
  "identifier": "(webpack)\\test\\browsertest\\lib\\index.web.js", // ID فريد يستخدم داخليًا
  "name": "./lib/index.web.js", // مسار الملف الفعلي
  "optional": false, // هل كل requests إلى هذا module داخل كتل `try... catch`، وهذا غير مهم مع ESM
  "prefetched": false, // هل تم [prefetch](/plugins/prefetch-plugin) لهذا module
  "profile": {
    // إحصاءات خاصة بتجميع module مرتبطة بـ [`--profile`](/api/cli/#profiling)، بالميلي ثانية
    "building": 73, // التحميل والتحليل
    "dependencies": 242, // بناء dependencies
    "factory": 11 // حل dependencies
  },
  "reasons": [
    // راجع الوصف أدناه
  ],
  "size": 3593, // الحجم التقديري للـ module بالبايت
  "source": "// Should not break it...\r\nif(typeof...", // النص الخام للمصدر بعد تحويله إلى string
  "warnings": 0 // عدد التحذيرات أثناء حل module أو معالجته
}

يحتوي كل module أيضًا قائمة من كائنات reasons توضّح سبب تضمين ذلك module في dependency graph. كل "reason" يشبه كائنات origins المذكورة في قسم كائنات chunk:

{
  "loc": "33:24-93", // أسطر الكود التي جعلت module يُضمّن
  "module": "./lib/index.web.js", // المسار النسبي للـ module اعتمادًا على [context](/configuration/entry-context/#context)
  "moduleId": 0, // ID الخاص بالـ module
  "moduleIdentifier": "(webpack)\\test\\browsertest\\lib\\index.web.js", // مسار module
  "moduleName": "./lib/index.web.js", // اسم أسهل قراءة للـ module ويُستخدم عند تنسيق العرض
  "type": "require.context", // [نوع request](/api/module-methods) المستخدم
  "userRequest": "../../cases" // النص الخام المستخدم في request الخاص بـ `import` أو `require`
}

كائنات Entry

"main": {
  "name": "main",
  "chunks": [
    179
  ],
  "assets": [
    {
      "name": "main.js",
      "size": 22
    }
  ],
  "filteredAssets": 0,
  "assetsSize": 22,
  "auxiliaryAssets": [],
  "filteredAuxiliaryAssets": 0,
  "auxiliaryAssetsSize": 0,
  "children": {},
  "childAssets": {},
  "isOverSizeLimit": false
}

الأخطاء والتحذيرات

تحتوي الخاصيتان errors وwarnings قائمة كائنات. يحتوي كل كائن رسالة، وstack trace، وخصائص أخرى:

{
  "moduleIdentifier": "C:\\Repos\\webpack\\test\\cases\\context\\issue-5750\\index.js",
  "moduleName": "(webpack)/test/cases/context/issue-5750/index.js",
  "loc": "3:8-47",
  "message": "Critical dependency: Contexts can't use RegExps with the 'g' or 'y' flags.",
  "moduleId": 29595,
  "moduleTrace": [
    {
      "originIdentifier": "C:\\Repos\\webpack\\test\\cases|sync|/^\\.\\/[^/]+\\/[^/]+\\/index\\.js$/",
      "originName": "(webpack)/test/cases sync ^\\.\\/[^/]+\\/[^/]+\\/index\\.js$",
      "moduleIdentifier": "C:\\Repos\\webpack\\test\\cases\\context\\issue-5750\\index.js",
      "moduleName": "(webpack)/test/cases/context/issue-5750/index.js",
      "dependencies": [
        {
          "loc": "./context/issue-5750/index.js"
        }
      ],
      "originId": 32582,
      "moduleId": 29595
    },
    {
      "originIdentifier": "C:\\Repos\\webpack\\testCases.js",
      "originName": "(webpack)/testCases.js",
      "moduleIdentifier": "C:\\Repos\\webpack\\test\\cases|sync|/^\\.\\/[^/]+\\/[^/]+\\/index\\.js$/",
      "moduleName": "(webpack)/test/cases sync ^\\.\\/[^/]+\\/[^/]+\\/index\\.js$",
      "dependencies": [
        {
          "loc": "1:0-70"
        }
      ],
      "originId": 8198,
      "moduleId": 32582
    }
  ],
  "details": "at RequireContextDependency.getWarnings (C:\\Repos\\webpack\\lib\\dependencies\\ContextDependency.js:79:5)\n    at Compilation.reportDependencyErrorsAndWarnings (C:\\Repos\\webpack\\lib\\Compilation.js:1727:24)\n    at C:\\Repos\\webpack\\lib\\Compilation.js:1467:10\n    at _next2 (<anonymous>:16:1)\n    at eval (<anonymous>:42:1)\n    at C:\\Repos\\webpack\\node_modules\\neo-async\\async.js:2830:7\n    at Object.each (C:\\Repos\\webpack\\node_modules\\neo-async\\async.js:2850:39)\n    at C:\\Repos\\webpack\\lib\\FlagDependencyExportsPlugin.js:219:18\n    at C:\\Repos\\webpack\\node_modules\\neo-async\\async.js:2830:7\n    at Object.each (C:\\Repos\\webpack\\node_modules\\neo-async\\async.js:2850:39)\n    at C:\\Repos\\webpack\\lib\\FlagDependencyExportsPlugin.js:40:16\n    at Hook.eval [as callAsync] (<anonymous>:38:1)\n    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\\Repos\\tapable\\lib\\Hook.js:18:14)\n    at Compilation.finish (C:\\Repos\\webpack\\lib\\Compilation.js:1462:28)\n    at C:\\Repos\\webpack\\lib\\Compiler.js:909:18\n    at processTicksAndRejections (internal/process/task_queues.js:75:11)\n",
  "stack": "ModuleDependencyWarning: Critical dependency: Contexts can't use RegExps with the 'g' or 'y' flags.\n    at Compilation.reportDependencyErrorsAndWarnings (C:\\Repos\\webpack\\lib\\Compilation.js:1732:23)\n    at C:\\Repos\\webpack\\lib\\Compilation.js:1467:10\n    at _next2 (<anonymous>:16:1)\n    at eval (<anonymous>:42:1)\n    at C:\\Repos\\webpack\\node_modules\\neo-async\\async.js:2830:7\n    at Object.each (C:\\Repos\\webpack\\node_modules\\neo-async\\async.js:2850:39)\n    at C:\\Repos\\webpack\\lib\\FlagDependencyExportsPlugin.js:219:18\n    at C:\\Repos\\webpack\\node_modules\\neo-async\\async.js:2830:7\n    at Object.each (C:\\Repos\\webpack\\node_modules\\neo-async\\async.js:2850:39)\n    at C:\\Repos\\webpack\\lib\\FlagDependencyExportsPlugin.js:40:16\n    at Hook.eval [as callAsync] (<anonymous>:38:1)\n    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\\Repos\\tapable\\lib\\Hook.js:18:14)\n    at Compilation.finish (C:\\Repos\\webpack\\lib\\Compilation.js:1462:28)\n    at C:\\Repos\\webpack\\lib\\Compiler.js:909:18\n    at processTicksAndRejections (internal/process/task_queues.js:75:11)\n"
}
·تعديل هذه الصفحة
السابق ›
واجهة Node
‹ التالي
webpack-dev-server API

1 مساهم

RlxChap2