تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

استخدام Imagemin مع حزمة الويب

Katie Hempenius

إعداد المكوّن الإضافي Imagemin webpack

يحتوي هذا الخطأ على webpack وwebpack-cli و imagemin-webpack-plugin لإضافة الإعدادات لبرنامج Imagemin، ستحتاج إلى لتعديل ملف webpack.config.js.

تم نسخ الصور من webpack.config.js الحالي لهذا المشروع. الدليل images/ إلى الدليل dist/ ولكن لم يتم وضغطها.

انقر على إنشاء ريمكس لتعديل لجعل المشروع قابلاً للتعديل.

ملاحظة: لماذا قد تنسخ الصور إلى مجلد dist/ جديد؟ الاختصار dist/ يشير إلى "التوزيع". ومن الممارسات الشائعة إلى حدّ ما الفصل بين الرموز والصور وغيرها من المحتوى الأصلي لأنّها قد تكون مختلفة بعض الشيء.

أولاً، أعلِن عن المكوّن الإضافي Imagemin عن طريق إضافة هذه التعليمة البرمجية في أعلى webpack.config.js:

const ImageminPlugin = require('imagemin-webpack-plugin').default;

بعد ذلك، أضِف الرمز التالي كعنصر أخير في مصفوفة plugins[]. هذا النمط تضيف Imagemin إلى قائمة المكونات الإضافية التي تستخدمها حزمة الويب:

new ImageminPlugin()

✔︎ تسجيل الوصول

من المفترض أن يظهر ملف webpack.config.js الكامل الآن على النحو التالي:

const ImageminPlugin = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
     new CopyWebpackPlugin([{
       from: 'img/**/**',
       to: path.resolve(__dirname, 'dist')
     }]),
     new ImageminPlugin()
  ]
}

لديك الآن تكوين حزمة ويب لضغط الصور باستخدام Imagemin.

تشغيل حزمة الويب

انقر على Terminal (ملاحظة: إذا لم يظهر الزر "طرفي"، قد تحتاج إلى استخدام خيار "ملء الشاشة").
لضغط صورك، شغِّل webpack من خلال كتابة الأمر التالي في وحدة التحكم:

webpack --config webpack.config.js --mode development

ولكن ماذا يحدث عند تشغيل webpack في وضع الإنتاج؟

تمت إعادة تشغيل حزمة الويب، ولكن هذه المرة في وضع الإنتاج:

webpack --config webpack.config.js --mode production

هذه المرة، تعرض حزمة الويب تحذيرًا لإعلامك بأنّ ملف PNG من الملفات، على الرغم من ضغطها بعض الشيء، تتجاوز الحد الموصى به للحجم. (يعطي وضعي development وproduction في webpack الأولوية لعناصر مختلفة، ما لا يظهر لك هذا التحذير إلا أثناء تشغيل حزمة الويب في وضع الإنتاج).

يمكنك تخصيص إعدادات Imagemin لإصلاح هذا التحذير.

تخصيص إعدادات Imagemin

أضف إعدادات ضغط صور PNG من خلال تمرير الكائن التالي إلى ImageminPlugin():

{pngquant: ({quality: [0.5, 0.5]})}

تطلب هذه التعليمة البرمجية من Imagemin ضغط ملفات PNG باستخدام المكوّن الإضافي Pngquant. تشير رسالة الأشكال البيانية يستخدم الحقل quality نطاق قيم min وmax لتحديد مستوى الضغط—0 هو أدنى مستوى و1 هو أعلى مستوى. لفرض على جميع الصور مضغوطة بجودة 50%، اضبط 0.5 كالحد الأدنى والحد الأقصى للقيمة.

✔︎ تسجيل الوصول

يُفترض أن يظهر ملف webpack.config.js الآن على النحو التالي:

const ImageminPlugin = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new CopyWebpackPlugin([{
        from: 'img/**/**',
        to: path.resolve(__dirname, 'dist')
    }]),
    new ImageminPlugin({
      pngquant: ({quality: [0.5, 0.5]}),
      })
  ]
}

ولكن ماذا عن صور JPEG؟ يحتوي المشروع أيضًا على صور JPEG، لذا يجب تحديد وكيفية ضغطها أيضًا.

تخصيص إعدادات Imagemin (متابعة)

بدلاً من استخدام المكوّن الإضافي التلقائي في imagemin-webpack-plugin لضغط JPG (imagemin-jpegtran)، يمكنك استخدام المكوّن الإضافي imagemin-mozjpeg. على عكس Jpegtran، يتيح لك Mozjpeg تحديد جودة الضغط لضغط JPG. لقد لقد ثبتّ بالفعل المكون الإضافي Mozjpeg لك في هذا التأثير، ولكنك ستحتاج إلى تعديل ملف webpack.config.js:

يمكنك إعداد المكوّن الإضافي imagemin-mozjpeg من خلال إضافة السطر التالي في أعلى ملف webpack.config.js:

const imageminMozjpeg = require('imagemin-mozjpeg');

أضِف السمة plugins إلى العنصر الذي تم تمريره إلى ImageminPlugin()، بحيث يبدو الكائن الآن على النحو التالي:

new ImageminPlugin({
  pngquant: ({quality: [0.5, 0.5]}),
  plugins: [imageminMozjpeg({quality: 50})]
})

يخبر هذا الرمز من حزمة الويب بضغط ملفات JPG إلى جودة 50 (0 هو الأسوأ؛ 100 هو الأفضل) باستخدام المكون الإضافي Mozjpeg.

إذا كنت تضيف إعدادات للمكون الإضافي الذي يعد مكونًا إضافيًا افتراضيًا imagemin-webpack-plugin، يمكن إضافتها كزوج من المفاتيح والكائن في الكائن تم تمريره إلى ImageminPlugin(). تُعد إعدادات Pnquant مثالاً جيدًا على هذا.

ومع ذلك، إذا كنت تضيف إعدادات للمكونات الإضافية غير الافتراضية (على سبيل المثال، Mozjpeg)، يجب إضافتها عن طريق تضمينها في الصفيف المقابل السمة plugins.

✔︎ تسجيل الوصول

يُفترض أن تظهر التعليمة البرمجية الآن على النحو التالي:

const imageminMozjpeg = require('imagemin-mozjpeg');
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new CopyWebpackPlugin([{
      from: 'img/**/**',
      to: path.resolve(__dirname, 'dist')
    }]),
    new ImageminPlugin({
      pngquant: ({quality: [0.5, 0.5]}),
      plugins: [imageminMozjpeg({quality: 50})]
    })
  ]
}

إعادة تشغيل حزمة الويب والتحقّق من النتائج باستخدام Lighthouse

في وحدة التحكّم، أعِد تشغيل حزمة الويب:

webpack --config webpack.config.js --mode production

رائع! من المفترض أن تؤدي التغييرات إلى إصلاح تحذيرات حزم الويب.

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

أداة "ترميز الصور بفعالية" في Lighthouse لتدقيق الأداء معرفة ما إذا يتم ضغط صور JPEG الموجودة على صفحتك بشكل مثالي.

لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق. ثم اضغط ملء الشاشة
إجراء تدقيق أداء Lighthouse (Lighthouse > الخيارات > الأداء) على النسخة المباشرة من أداة Glitch والتحقق من أنّ تشفير تم اجتياز تدقيق الصور.

اجتياز "ترميز الصور بكفاءة" التدقيق في Lighthouse

اكتمال عملية النقل بنجاح استخدمت Imagemin لضغط الصور على صفحتك على النحو الأمثل.