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

Katie Hempenius

لمتابعة هذا الدرس التطبيقي حول الترميز، افتح هذا الرابط في Glitch في علامة تبويب ثانية.

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

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

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

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

ملاحظة: ما سبب نسخ الصور إلى مجلد جديد في dist/؟ ‫dist/ هو اختصار لكلمة "distribution" (توزيع)، ومن الشائع جدًا الاحتفاظ بالرموز والصور الأصلية وما إلى ذلك بشكل منفصل عن النُسخ الموزَّعة لأنّها قد تكون مختلفة قليلاً.

• أولاً، عليك تعريف المكوّن الإضافي Imagemin من خلال إضافة هذا الرمز في أعلى webpack.config.js:

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

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

new ImageminPlugin()

ملاحظة: لماذا يجب إضافته في نهاية الصفيف؟ وتضمن إضافته هناك تشغيل Imagemin في النهاية، بعد جميع المكوّنات الإضافية الأخرى.

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

يُفترض أن يظهر ملف 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، ولكن هذه المرة في وضع الإنتاج:

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 في Glitch، ولكن عليك تعديل ملف 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.

ملاحظة: هل تتساءل عن سبب إضافة Mozjpeg إلى مصفوفة المكوّنات الإضافية، وعدم إضافة Pngquant؟ سؤال جيد.

إذا كنت تضيف إعدادات لمكوّن إضافي هو مكوّن إضافي تلقائي في 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})]
    })
  ]
}

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

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

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

رائع! من المفترض أن تكون التغييرات التي أجريتها قد أصلحت تحذيرات webpack.

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

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

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

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