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

Katie Hempenius

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

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

كان webpack.config.js الحالي لهذا المشروع ينسخ الصور من directory images/ إلى directorydist/، ولكنّه لم يكن يضغطها.

• انقر على Remix to Edit (إنشاء ريمكس لتعديله) ليصبح المشروع قابلاً للتعديل.

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

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

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

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()
  ]
}

لديك الآن إعداد webpack الذي يضغط الصور باستخدام Imagemin.

تشغيل webpack

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

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

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

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

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

هذه المرة، يعرض webpack تحذيرًا يُعلمك بأنّ ملفات PNG لا تزال تتجاوز الحد الأقصى للحجم المُقترَح، على الرغم من بعض عمليات الضغط. (يمنح وضعا development وproduction في webpack الأولوية لأشياء مختلفة، وهو السبب في عدم ظهور هذا التحذير إلا أثناء تشغيل 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})]
})

يطلب هذا الرمز من Webpack ضغط ملفات 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:

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

رائع! من المفترض أنّ التغييرات التي أجريتها قد أدّت إلى حلّ تحذيرات Webpack.

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

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

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

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