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

"كاتي هيمبينيوس"

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

إعداد المكوّن الإضافي 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()

ملاحظة: لماذا تتم إضافتها في نهاية الصفيف؟ من خلال إضافته إلى هناك، يمكنك ضمان تشغيل 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()
  ]
}

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

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

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

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

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

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

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

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

خصِّص إعدادات 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})]
})

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

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

إذا كنت تريد إضافة إعدادات لمكوِّن إضافي تلقائي من السمة imagemin-webpack-plugin، يمكن إضافتهما كزوج مفتاح وكائن في العنصر الذي تم تمريره إلى ImageminPlugin(). تعد إعدادات Pnquantity مثالاً جيدًا على ذلك.

في المقابل، إذا كنت تضيف إعدادات لمكونات إضافية غير تلقائية (مثل 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 والتحقّق من اجتياز عملية تدقيق ترميز الصور بكفاءة.

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