الشروع في استخدام Webpack

في الأيام الأولى عندما تم تقديم الوحدة النمطية في JavaScript ، لم يكن هناك دعم أصلي لتشغيل الوحدات النمطية داخل المتصفح. تم تنفيذ دعم البرمجة المعيارية في Node.js باستخدام مخطط CommonJS وتم اعتماده من قبل أولئك الذين يستخدمون JavaScript لبناء تطبيقات جانب الخادم.

كان لديها أيضًا احتمالات لتطبيقات الويب الكبيرة حيث يمكن للمطورين تجنب تصادمات مساحة الأسماء وبناء قواعد أكواد أكثر قابلية للصيانة عن طريق كتابة التعليمات البرمجية في نمط أكثر نمطية. ولكن لا يزال هناك تحدٍ: لا يمكن استخدام الوحدات النمطية في متصفحات الويب ، حيث يتم تنفيذ JavaScript عادةً.

لحل هذه المشكلة ، تمت كتابة حزم الوحدات النمطية مثل webpack و Parcel و Rollup وكذلك Google's Closure Compiler لإنشاء حزم محسّنة من التعليمات البرمجية الخاصة بك لمتصفح المستخدم النهائي لتنزيلها وتنفيذها.

ماذا يعني "تجميع" التعليمات البرمجية الخاصة بك؟

يشير رمز التجميع إلى الجمع بين وحدات متعددة وتحسينها في حزمة واحدة أو أكثر جاهزة للإنتاج . يمكن فهم الحزمة المذكورة هنا بشكل أفضل على أنها المنتج النهائي لعملية التجميع بأكملها.

في هذه المقالة ، سنركز على webpack ، وهي أداة كتبها Tobias Koppers ، والتي تطورت بمرور الوقت لتصبح أداة رئيسية ضمن سلسلة أدوات JavaScript ، وغالبًا ما تُستخدم في المشاريع الكبيرة والصغيرة.

ملاحظة: للاستفادة من هذه المقالة ، من الجيد أن تكون على دراية بوحدات JavaScript النمطية. ستحتاج أيضًا إلى تثبيت Node على جهازك المحلي ، حتى تتمكن من تثبيت حزمة الويب واستخدامها محليًا.

ما هو webpack؟

webpack عبارة عن مجمّع وحدة ثابتة قابل للتوسعة وقابل للتكوين بدرجة كبيرة لتطبيقات JavaScript. بفضل طبيعتها القابلة للتوسيع ، يمكنك توصيل اللوادر الخارجية والمكونات الإضافية لتحقيق هدفك النهائي.

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

لفهم كيفية عمل حزمة الويب ، نحتاج إلى فهم بعض المصطلحات التي تستخدمها (راجع قاموس مصطلحات الويب. غالبًا ما يتم استخدام هذه المصطلحات في هذه المقالة ، كما تتم الإشارة إليها بشكل متكرر في وثائق حزمة الويب.

• قطعة
  تشير القطعة إلى الكود المستخرج من الوحدات. سيتم تخزين هذا الرمز في ملف مقطع. تُستخدم المقاطع بشكل شائع عند إجراء تقسيم التعليمات البرمجية باستخدام حزمة الويب.
• الوحدات
  الوحدات النمطية هي أجزاء مفككة من تطبيقك تقوم باستيرادها لأداء مهمة أو وظيفة معينة. يدعم Webpack الوحدات النمطية التي تم إنشاؤها باستخدام بناء جملة ES6 و CommonJS و AMD.
• أصول
  يتم استخدام مصطلح الأصول بشكل متكرر داخل حزم الويب والحزم الأخرى بشكل عام. يشير إلى الملفات الثابتة المجمعة أثناء عملية الإنشاء. يمكن أن تكون هذه الملفات أي شيء من الصور إلى الخطوط أو حتى ملفات الفيديو. بينما تقرأ المزيد أسفل المقالة ، سترى كيف نستخدم اللوادر للعمل مع أنواع الأصول المختلفة.

يوصى بقراءة : Webpack - مقدمة مفصلة

بمجرد أن نفهم ما هي حزمة الويب وما هي المصطلحات التي تستخدمها ، دعنا نرى كيف يتم تطبيقها في تجميع ملف تكوين لمشروع تجريبي.

ملاحظة : ستحتاج أيضًا إلى تثبيت webpack-cli cli لاستخدام حزمة الويب على جهازك. إذا لم يكن مثبتًا ، فستتم مطالبتك من الجهاز الطرفي بتثبيته.

ملفات تكوين حزمة الويب

بصرف النظر عن استخدام webpack-cli من محطة طرفية ، يمكنك أيضًا استخدام حزمة الويب في مشروعك عبر ملف تكوين. ولكن مع الإصدارات الأخيرة من حزمة الويب ، يمكننا استخدامها في مشروعنا بدون ملف تكوين. يمكننا استخدام webpack كقيمة لأحد الأوامر الموجودة في ملف package.json - بدون أي علم. بهذه الطريقة ، ستفترض حزمة الويب أن ملف نقطة دخول مشروعك موجود في دليل src . سيقوم بتجميع ملف الإدخال dist إلى دليل التوزيع.

مثال على ذلك هو نموذج ملف package.json أدناه. هنا ، نستخدم حزمة الويب لتجميع التطبيق بدون ملف تكوين:

 { "name" : "Smashing Magazine", "main": "index.js", "scripts": { "build" : "webpack" }, "dependencies" : { "webpack": "^5.24.1" } }

عند تشغيل الأمر build في الملف أعلاه ، ستقوم حزمة الويب بتجميع الملف في دليل src/index.js وإخراجها في ملف main.js في دليل dist . webpack ، مع ذلك ، أكثر مرونة من ذلك. يمكننا تغيير نقطة الإدخال ، وضبط نقطة الإخراج وتحسين العديد من السلوكيات الافتراضية الأخرى عن طريق تحرير ملف التكوين بعلامة -- config .

مثال على ذلك أمر build معدّل من ملف package.json أعلاه:

 "build" : "webpack --config webpack.config.js"

أعلاه ، أضفنا العلامة --config webpack.config.js كملف له تكوين webpack الجديد.

بالرغم من ذلك ، فإن ملف webpack.config.js غير موجود بعد. لذلك نحتاج إلى إنشائه في دليل التطبيق الخاص بنا ولصق الكود التالي أدناه في الملف.

 # webpack.config.js const path = require("path") module.exports = { entry : "./src/entry", output : { path: path.resolve(__dirname, "dist"), filename: "output.js" } }

لا يزال الملف أعلاه يقوم بتكوين حزمة الويب لتجميع ملف جافا سكريبت الخاص بك ، ولكن يمكننا الآن تحديد مسارات ملف الإدخال والإخراج المخصصة بدلاً من المسار الافتراضي الذي تستخدمه حزمة الويب.

بعض الأشياء التي يجب ملاحظتها حول ملف تكوين حزمة الويب:

• ملف تكوين حزمة الويب هو ملف JavaScript ، تمت كتابته كوحدة نمطية JavaScript CommonJS.
• يقوم ملف تكوين حزمة الويب بتصدير كائن بعدة خصائص. يتم استخدام كل خاصية من هذه الخصائص كخيار لتهيئة حزمة الويب عند تجميع التعليمات البرمجية الخاصة بك. مثال على خيار mode :
  • mode
    في التكوين ، يتم استخدام هذا الخيار لتعيين قيمة NODE_ENV أثناء التجميع. يمكن أن يكون لها قيمة production أو development . عندما لا يتم تحديدها ، فإنها ستصبح افتراضيًا none . من المهم أيضًا ملاحظة أن حزمة الويب تجمع أصولك بشكل مختلف بناءً على قيمة mode . على سبيل المثال ، تقوم حزمة الويب تلقائيًا بتخزين حزمك مؤقتًا في وضع التطوير لتحسين وقت الحزمة وتقليله. راجع قسم الوضع في وثائق webpack للاطلاع على سجل التغيير للخيارات المطبقة تلقائيًا في كل وضع.
    

مفاهيم webpack

عند تكوين حزمة الويب إما عبر CLI أو من خلال ملف التكوين ، هناك أربعة مفاهيم رئيسية يتم تطبيقها كخيارات . يركز القسم التالي من هذه المقالة على هذه المفاهيم ويطبقها عند إنشاء التكوين لتطبيق ويب تجريبي.

يرجى ملاحظة أن المفاهيم الموضحة أدناه تشترك في بعض أوجه التشابه مع حزم الوحدات الأخرى. على سبيل المثال ، عند استخدام Rollup مع ملف تكوين ، يمكنك تحديد حقل إدخال لتحديد نقطة إدخال الرسم البياني للتبعية ، وكائن الإخراج الذي يكوّن كيفية ومكان وضع القطع المنتجة ، وأيضًا كائن الإضافات لإضافة المكونات الإضافية الخارجية.

دخول

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

يمكن أن تكون نقطة إدخال التكوين الخاصة بك نوع إدخال فردي بقيمة ملف واحدة ، على غرار المثال أدناه:

 # webpack.configuration.js module.exports = { mode: "development", entry : "./src/entry" }

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

 # webpack.configuration.js const webpack = require("webpack") module.exports = { mode: "development", entry: [ './src/entry', './src/entry2' ], }

انتاج |

تمامًا كما يوحي الاسم ، فإن حقل إخراج التكوين هو المكان الذي ستعيش فيه الحزمة التي تم إنشاؤها. يكون هذا المجال مفيدًا عندما يكون لديك عدة وحدات في مكانها. بدلاً من استخدام الاسم الذي تم إنشاؤه بواسطة حزمة الويب ، يمكنك تحديد اسم الملف الخاص بك .

 # webpack.configuration.js const webpack = require("webpack"); const path = require("path"); module.exports = { mode: "development", entry: './src/entry', output: { filename: "webpack-output.js", path: path.resolve(__dirname, "dist"), } }

لوادر

بشكل افتراضي ، تتعرف حزمة الويب على ملفات جافا سكريبت داخل تطبيقك فقط. ومع ذلك ، فإن حزمة الويب تتعامل مع كل ملف يتم استيراده كوحدة نمطية على أنها تبعية ، ويضيفها إلى الرسم البياني للتبعية. لمعالجة الموارد الثابتة مثل الصور أو ملفات CSS أو ملفات JSON أو حتى بياناتك المخزنة في CSV ، تستخدم حزمة الويب أدوات تحميل "لتحميل" هذه الملفات في الحزمة.

تتميز اللوادر بالمرونة الكافية لاستخدامها في الكثير من الأشياء ، بدءًا من تحويل كود ES الخاص بك ، إلى التعامل مع أنماط التطبيق الخاص بك أو حتى فحص التعليمات البرمجية باستخدام ESLint.

هناك ثلاث طرق لاستخدام أدوات التحميل داخل تطبيقك. أحدها من خلال الطريقة المضمنة عن طريق استيرادها مباشرة في الملف. على سبيل المثال ، لتقليل حجم الصورة ، يمكننا استخدام أداة image-loader في الملف مباشرة كما هو موضح أدناه:

 // main.js import ImageLoader from 'image-loader'

خيار آخر مفضل لاستخدام برامج التحميل هو عبر ملف تكوين webpack الخاص بك. بهذه الطريقة ، يمكنك القيام بالمزيد باستخدام أدوات التحميل ، مثل تحديد أنواع الملفات التي تريد تطبيق برامج التحميل عليها. للقيام بذلك ، نقوم بإنشاء مصفوفة rules وتحديد أدوات التحميل في كائن ، ولكل منها حقل اختبار مع تعبير regex يطابق الأصول التي نريد تطبيق أدوات التحميل عليها.

على سبيل المثال ، مع أداة تحميل image-loader استيرادها مباشرة في المثال السابق ، يمكننا استخدامها في ملف تكوين حزمة الويب مع الخيارات الأساسية من الوثائق. سيبدو هذا كالتالي:

 # webpack.config.js const webpack = require("webpack") const path = require("path") const merge = require("webpack-merge") module.exports = { mode: "development", entry: './src/entry', output: { filename: "webpack-output.js", path: path.resolve(__dirname, "dist"), }, module: { rules: [ { test: /\.(jpe?g|png|gif|svg)$/i, use: [ 'img-loader' ] } ] } }

ألق نظرة فاحصة على حقل test في الكائن الذي يحتوي على أداة image-loader أعلاه. يمكننا تحديد تعبير regex الذي يطابق جميع ملفات الصور: إما تنسيق jp(e)g و png و gif و svg .

آخر طريقة لاستخدام اللوادر هي عبر واجهة سطر الأوامر (CLI --module-bind .

يحتوي الملف التمهيدي awesome-webpack على قائمة شاملة من أدوات التحميل التي يمكنك استخدامها مع حزمة الويب ، كل منها مجمعة في فئات من العمليات التي يؤدونها. فيما يلي عدد قليل من أدوات التحميل التي قد تجدها في متناول يديك في تطبيقك:

• مُحمل متجاوب ستجد هذا المُحمل مفيدًا جدًا عند إضافة الصور لتلائم موقعك أو تطبيقك سريع الاستجابة. يقوم بإنشاء صور متعددة بأحجام مختلفة من صورة واحدة وإرجاع مجموعة srcset تتطابق مع الصور لاستخدامها في أحجام شاشة العرض المناسبة.
• محمل بابل
  يستخدم هذا لتحويل كود JavaScript الخاص بك من صيغة ECMA الحديثة إلى ES5.
• GraphQL-Loader
  إذا كنت متحمسًا لـ GraphQL ، فستجد أن أداة التحميل هذه مفيدة جدًا لأنها تقوم بتحميل ملفات .graphql التي تحتوي على مخطط GraphQL والاستعلامات والطفرات - جنبًا إلى جنب مع خيار تمكين التحقق من الصحة.

الإضافات

يسمح استخدام الإضافات لمُجمّع webpack بأداء المهام على الأجزاء المُنتجة من الوحدات المجمّعة. على الرغم من أن حزمة الويب ليست عداء مهام ، إلا أنه باستخدام المكونات الإضافية ، يمكننا تنفيذ بعض الإجراءات المخصصة التي لم تتمكن برامج التحميل من تنفيذها عندما تم تجميع الكود.

مثال على المكون الإضافي webpack هو ProgressPlugin المدمج في webpack. يوفر طريقة لتخصيص التقدم الذي تتم طباعته في وحدة التحكم أثناء التجميع.

 # webpack.config.js const webpack = require("webpack") const path = require("path") const merge = require("webpack-merge") const config = { mode: "development", entry: './src/entry', output: { filename: "webpack-output.js", path: path.resolve(__dirname, "dist"), }, module: { rules: [ { test: /\.(jpe?g|png|gif|svg)$/i, use: [ 'img-loader' ] } ] }, plugins: [ new webpack.ProgressPlugin({ handler: (percentage, message ) => { console.info(percentage, message); }, }) ] } module.exports = config

من خلال المكون الإضافي Progress في التكوين أعلاه ، قدمنا ​​وظيفة معالج ستطبع نسبة الترجمة والرسالة إلى وحدة التحكم أثناء عملية الترجمة.

فيما يلي بعض المكونات الإضافية من ملف webpack التمهيدي الرائع والذي ستجده مفيدًا في تطبيق webpack الخاص بك.

• البرنامج المساعد غير متصل
  يستخدم هذا المكون الإضافي عمال الخدمة أولاً أو AppCache حيثما كان ذلك متاحًا لتوفير تجربة غير متصلة بالإنترنت للمشاريع المُدارة webpack.
• Purgecss-webpack-plugin
  يكون هذا المكون الإضافي مفيدًا عند محاولة تحسين مشروع webpack الخاص بك لأنه يزيل CSS غير المستخدمة داخل تطبيقك أثناء التجميع.
  

في هذه المرحلة ، لدينا أول تكوين webpack الخاص بنا لتطبيق صغير نسبيًا تم إعداده بالكامل. دعنا نفكر أكثر في كيفية القيام بأشياء معينة باستخدام حزمة الويب في تطبيقنا.

التعامل مع بيئات متعددة

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

هناك عدة طرق لتحقيق ذلك ، على النحو الموصى به من قبل webpack والمجتمع. تتمثل إحدى الطرق في تحويل ملف التكوين الخاص بك إلى تصدير وظيفة تقوم بإرجاع كائن. بهذه الطريقة ، سيتم تمرير البيئة الحالية إلى الوظيفة بواسطة مترجم webpack كمعاملها الأول ، وخيار آخر كمعامل ثاني.

ستكون طريقة التعامل مع بيئة webpack هذه مفيدة إذا كان هناك عدد قليل من العمليات التي ترغب في تنفيذها بشكل مختلف بناءً على البيئة الحالية. ومع ذلك ، بالنسبة للتطبيقات الأكبر ذات التكوينات الأكثر تعقيدًا ، فقد ينتهي بك الأمر بتكوين مليء بالكثير من العبارات الشرطية.

يوضح مقتطف الشفرة أدناه مثالاً على كيفية التعامل مع بيئة production development في نفس الملف باستخدام طريقة functions .

 // webpack.config.js module.exports = function (env, args) { return { mode : env.production ? 'production' : 'development', entry: './src/entry', output: { filename: "webpack-output.js", path: path.resolve(__dirname, "dist"), }, plugins: [ env.development && ( new webpack.ProgressPlugin({ handler: (percentage, message ) => { console.info(percentage, message); }, }) ) ] } }

بالاطلاع على الوظيفة التي تم تصديرها في مقتطف الشفرة أعلاه ، سترى كيف يتم استخدام معلمة env التي تم تمريرها إلى الوظيفة مع عامل تشغيل ثلاثي لتبديل القيم. يتم استخدامه لأول مرة لضبط وضع webpack ، ثم يتم استخدامه أيضًا لتمكين ProgressPlugin فقط في وضع التطوير.

هناك طريقة أخرى أكثر أناقة للتعامل مع بيئة الإنتاج والتطوير الخاصة بك وهي إنشاء ملفات تكوين مختلفة للبيئتين . بمجرد القيام بذلك ، يمكننا استخدامها مع أوامر مختلفة في البرامج النصية package.json عند تجميع التطبيق. ألق نظرة على المقتطف أدناه:

 { "name" : "smashing-magazine", "main" : "index.js" "scripts" : { "bundle:dev" : "webpack --config webpack.dev.config.js", "bundle:prod" : "webpack --config webpack.prod.config.js" }, "dependencies" : { "webpack": "^5.24.1" } }

في package.json أعلاه ، لدينا أمرين للبرنامج النصي ، يستخدم كل منهما ملف تكوين مختلفًا مكتوبًا للتعامل مع بيئة معينة عند تجميع أصول التطبيق. يمكنك الآن تجميع تطبيقك باستخدام npm run bundle:dev في وضع التطوير ، أو npm run bundle:prod عند إنشاء حزمة جاهزة للإنتاج.

باستخدام الطريقة الثانية ، تتجنب العبارات الشرطية المقدمة عند إرجاع كائن التكوين الخاص بك من دالة. ومع ذلك ، يتعين عليك الآن أيضًا الاحتفاظ بملفات تكوين متعددة.

تقسيم ملف التكوين

في هذه المرحلة ، يكون ملف تكوين webpack الخاص بنا في 38 سطرًا من التعليمات البرمجية (LOC). هذا جيد جدًا لتطبيق تجريبي باستخدام أداة تحميل واحدة ومكوِّن إضافي واحد.

على الرغم من ذلك ، بالنسبة إلى تطبيق أكبر ، سيكون ملف تكوين webpack الخاص بنا أطول بالتأكيد ، حيث يحتوي على العديد من برامج التحميل والمكونات الإضافية مع خياراتها المخصصة لكل منها. للحفاظ على ملف التكوين نظيفًا وقابل للقراءة ، يمكننا تقسيم التكوين إلى كائنات أصغر عبر ملفات متعددة ثم استخدام حزمة webpack-merge لدمج كائنات التكوين في ملف أساسي واحد.

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

قم بإنشاء ملف webpack.plugin.config.js والصق الكود أدناه فيه لاستخدام المكونات الإضافية مع خيارات إضافية.

 // webpack.plugin.config.js const webpack = require('webpack') const plugin = [ new webpack.ProgressPlugin({ handler: (percentage, message ) => { console.info(percentage, message); }, }) ] module.exports = plugin

أعلاه ، لدينا مكون إضافي واحد قمنا باستخراجه من ملف webpack.configuration.js .

بعد ذلك ، قم بإنشاء ملف webpack.loader.config.js مع الكود أدناه لأدوات تحميل حزمة الويب.

 // webpack.loader.config.js const loader = { module: { rules: [ { test: /\.(jpe?g|png|gif|svg)$/i, use: [ 'img-loader' ] } ] } }

في كتلة التعليمات البرمجية أعلاه ، نقلنا webpack img-loader إلى ملف منفصل.

أخيرًا ، قم بإنشاء ملف webpack.base.config.js حيث سيتم الاحتفاظ بتكوين الإدخال والإخراج الأساسي لتطبيق webpack جنبًا إلى جنب مع الملفين اللذين تم إنشاؤهما أعلاه.

 // webpack.base.config.js const path = require("path") const merge = require("webpack-merge") const plugins = require('./webpack.plugin.config') const loaders = require('./webpack.loader.config') const config = merge(loaders, plugins, { mode: "development", entry: './src/entry', output: { filename: "webpack-output.js", path: path.resolve(__dirname, "dist"), } }); module.exports = config

بإلقاء نظرة على ملف webpack أعلاه ، يمكنك ملاحظة مدى صغر حجمه مقارنة بملف webpack.config.js الأصلي. الآن تم تقسيم الأجزاء الثلاثة الرئيسية من التكوين إلى ملفات أصغر ويمكن استخدامها بشكل فردي.

تحسين الإنشاءات الكبيرة

بينما تستمر في العمل على تطبيقك على مدار فترة زمنية ، سيزداد حجم تطبيقك بالتأكيد من حيث الميزات والحجم. عند حدوث ذلك ، سيتم إنشاء ملفات جديدة ، وسيتم تعديل الملفات القديمة أو إعادة بنائها ، وسيتم تثبيت حزم خارجية جديدة - كل ذلك يؤدي إلى زيادة حجم الحزمة المنبعثة من حزمة الويب.

بشكل افتراضي ، يحاول webpack تلقائيًا تحسين الحزم نيابة عنك إذا تم تعيين وضع التكوين الخاص بك على production . على سبيل المثال ، إحدى التقنيات التي تطبقها حزمة الويب بشكل افتراضي (تبدأ بـ webpack 4+) لتحسين حجم الحزمة وتقليلها هي Tree-Shaking. بشكل أساسي ، إنها تقنية تحسين تُستخدم لإزالة التعليمات البرمجية غير المستخدمة. على مستوى بسيط أثناء التجميع ، يتم استخدام عبارات الاستيراد والتصدير لاكتشاف الوحدات النمطية غير المستخدمة قبل إزالتها من الحزم المنبعثة.

يمكنك أيضًا تحسين حزمة التطبيق يدويًا عن طريق إضافة كائن optimization بحقول معينة في ملف التكوين الخاص بك. يحتوي قسم التحسين في وثائق webpack على قائمة كاملة من الحقول التي يمكنك استخدامها في كائن optimization لتحسين تطبيقك. لنفكر في واحد من أصل 20 حقلاً موثقًا.

• minimize
  يُستخدم هذا الحقل المنطقي لتوجيه حزمة الويب لتقليل حجم الحزمة. بشكل افتراضي ، ستحاول حزمة الويب تحقيق ذلك باستخدام TerserPlugin ، وهي حزمة تصغير التعليمات البرمجية يتم شحنها مع حزمة الويب.

ينطبق التصغير على تقليل الكود الخاص بك عن طريق إزالة البيانات غير الضرورية من الكود والذي بدوره يقلل من حجم الكود الناتج بعد العملية.

يمكننا أيضًا استخدام المصغرات المفضلة الأخرى عن طريق إضافة حقل مصفوفة minimizer داخل كائن optimization . مثال على ذلك هو استخدام المكون الإضافي Uglifyjs-webpack-أدناه.

 // webpack.config.js const Uglify = require("uglifyjs-webpack-plugin") module.exports = { optimization { minimize : true, minimizer : [ new Uglify({ cache : true, test: /\.js(\?.*)?$/i, }) ] } }

أعلاه ، يتم استخدام uglifyjs-webpack-plugin مهمين للغاية. أولاً ، يعني تمكين cache أن Uglify لن يؤدي إلا إلى تصغير الملفات الموجودة عندما تكون تغييرات جديدة ، ويحدد خيار test أنواع الملفات المحددة التي نريد تصغيرها.

ملاحظة: يقدم المكون الإضافي uglifyjs-webpack-plugin قائمة شاملة بالخيارات المتاحة للاستخدام عند تصغير الكود باستخدامه.

القليل من عرض التحسين

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

في هذا العرض التوضيحي ، سنستخدم تطبيق سطح مكتب تم إنشاؤه باستخدام Electron والذي يستخدم أيضًا React.js لواجهة المستخدم الخاصة به - وكلها مجمعة مع حزمة الويب. يبدو Electron و React.js وكأنهما مزيج ثقيل جدًا وقد يولدان على الأرجح حزمة أكبر.

ملاحظة : إذا كنت تتعلم عن Electron لأول مرة ، فإن هذا المقال يعطي نظرة ثاقبة حول ماهية Electron وكيف يمكنك استخدامه لبناء تطبيقات سطح المكتب عبر الأنظمة الأساسية.

لتجربة العرض التوضيحي محليًا ، قم باستنساخ التطبيق من مستودع GitHub وقم بتثبيت التبعيات باستخدام الأوامر أدناه.

 # clone repository git clone https://github.com/vickywane/webpack-react-demo.git # change directory cd demo-electron-react-webpack # install dependencies npm install

تطبيق سطح المكتب بسيط إلى حد ما مع صفحة واحدة مصممة باستخدام مكونات مصممة. عندما يتم تشغيل تطبيق سطح المكتب باستخدام الأمر yarn start ، تعرض الصفحة المفردة قائمة بالصور التي تم جلبها من CDN ، كما هو موضح أدناه.

لنقم بإنشاء حزمة تطوير لهذا التطبيق أولاً بدون أي تحسين يدوي لتحليل حجم الحزمة النهائي.

تشغيل yarn build:dev من محطة طرفية في دليل المشروع حزمة التطوير. بالإضافة إلى ذلك ، ستقوم بطباعة الإحصائيات التالية إلى جهازك:

سيُظهر لنا الأمر إحصائيات التجميع بأكمله والحزم المنبعثة.

لاحظ أن mainRenderer.js هو 1.11 ميبي بايت (حوالي 1.16 ميجا بايت). mainRenderer هو نقطة الدخول لتطبيق Electron.

بعد ذلك ، دعنا نضيف uglifyjs-webpack-plugin كمكوِّن إضافي مثبت في ملف webpack.base.config.js الكود.

 // webpack.base.config.js const Uglifyjs = require("uglifyjs-webpack-plugin") module.exports = { plugins : [ new Uglifyjs({ cache : true }) ] }

أخيرًا ، دعنا نجمع التطبيق مع حزمة الويب في وضع production . تشغيل yarn build:prod من جهازك الطرفي إلى إخراج البيانات أدناه إلى جهازك.

قم بتدوين ملاحظة عن جزء mainRenderer هذه المرة. لقد انخفض إلى 182 كيبي بايت (حوالي 186 كيلو بايت) ، وهذا أكثر من 80 ٪ من حجم مجموعة mainRenderer المنبعثة سابقًا!

دعنا نتخيل الحزم المنبعثة بشكل أكبر باستخدام محلل حزم الويب. قم بتثبيت المكون الإضافي باستخدام الأمر yarn add webpack-bundle-analyzer analzer وتعديل ملف webpack.base.config.js ليحتوي على الكود أدناه الذي يضيف المكون الإضافي.

 // webpack.base.config.js const Uglifyjs = require("uglifyjs-webpack-plugin"); const BundleAnalyzerPlugin = require("webpack-bundle-analyzer"); .BundleAnalyzerPlugin; const config = { plugins: [ new Uglifyjs({ cache : true }), new BundleAnalyzerPlugin(), ] }; module.exports = config;

Run yarn build:prod من جهازك الطرفي لإعادة تجميع التطبيق. بشكل افتراضي ، سيبدأ محلل حزمة حزمة الويب خادم HTTP يقدم نظرة عامة على الحزم في متصفحك.

من الصورة أعلاه ، يمكننا أن نرى تمثيلًا مرئيًا للحزمة المنبعثة وأحجام الملفات داخل الحزمة. في الصورة المرئية ، يمكننا ملاحظة أنه في المجلد node_modules ، أكبر ملف هو react-dom.production.min.js ، متبوعًا بـ stylis.min.js .

باستخدام أحجام الملفات التي تصورها المحلل ، سيكون لدينا فكرة أفضل عن الحزمة المثبتة التي تساهم في الجزء الأكبر من الحزمة. يمكننا بعد ذلك البحث عن طرق لتحسينها أو استبدالها بحزمة أخف.

ملاحظة: تسرد وثائق webpack-analer-plugin الوسائل الأخرى المتاحة لعرض التحليل الذي تم إنشاؤه من الحزم المرسلة.

مجتمع webpack

كانت إحدى نقاط القوة في حزمة الويب هي المجتمع الكبير من المطورين الذين يقفون وراءها وكان هذا مفيدًا جدًا للمطورين الذين يحاولون تجربة حزمة الويب لأول مرة. تمامًا مثل هذه المقالة ، هناك العديد من المقالات والأدلة والموارد مع الوثائق التي تعمل كدليل رائع عند استخدام حزمة الويب.

على سبيل المثال ، يحتوي دليل Build Performance من مدونة webpack على نصائح حول تحسين تصميمات webpack الخاصة بك ودراسة حالة Slack (على الرغم من كونها قديمة بعض الشيء) توضح كيف تم تحسين webpack في Slack.

تشرح العديد من موارد المجتمع أجزاء من وثائق webpack ، مما يوفر لك نماذج من المشاريع التجريبية لإظهار كيفية استخدام ميزات webpack. مثال على ذلك مقال في Webpack 5 Module Federation الذي يشرح كيفية استخدام ميزة اتحاد الوحدة النمطية الجديدة الخاصة بـ webpack في تطبيق React.

ملخص

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

في المرة التالية التي تحتاج فيها إلى اختيار مجمّع وحدة لتطبيقك ، نأمل أن تفهم بشكل أفضل بعض المفاهيم الأساسية لـ Webpack ، والمشكلة التي تحلها ، وكذلك خطوات إعداد ملفات التكوين الخاصة بك.

مزيد من القراءة على SmashingMag:

• حزمة الويب - مقدمة مفصلة
• بناء PWA مع Webpack و Workbox
• إعداد TypeScript لمشاريع التفاعل الحديثة باستخدام Webpack
• كيفية تسخير الآلات: أن تكون منتجًا مع متسابقي المهام