استفاده از Imagemin با webpack

Katie Hempenius

برای دنبال کردن این codelab، این Glitch را در برگه دوم باز کنید.

راه‌اندازی افزونه Imagemin webpack

این Glitch درحال‌حاضر حاوی 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 را به فهرست افزایه‌هایی که 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

• روی پایانه کلیک کنید (توجه: اگر دکمه «پایانه» نشان داده نمی‌شود، ممکن است لازم باشد از گزینه «تمام‌صفحه» استفاده کنید).
• برای فشرده‌سازی تصاویر، 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 را سفارشی کنید

با ارسال شیء زیر به ImageminPlugin()، تنظیمات فشرده‌سازی تصاویر PNG را اضافه کنید:

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

این کد به Imagemin می‌گوید که PNGها را بااستفاده از افزایه Pngquant فشرده کند. فیلد quality از گستره مقادیر min و max برای تعیین سطح فشرده‌سازی استفاده می‌کند—0 پایین‌ترین و 1 بالاترین است. برای اینکه همه تصاویر را مجبور کنید با کیفیت ۵۰٪ فشرده شوند، 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ها را بااستفاده از افزونه 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})]
    })
  ]
}

Re-run webpack and verify results with Lighthouse

• در کنسول، webpack را دوباره اجرا کنید:

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

هورا! تغییرات شما باید هشدارهای webpack را برطرف کرده باشد.

webpack درباره تصاویر بزرگ به شما هشدار می‌دهد، اما نمی‌تواند به شما بگوید که تصاویر فشرده نشده‌اند یا کمتر از حد فشرده شده‌اند. به همین دلیل همیشه ایده خوبی است که از Lighthouse برای تأیید تغییرات خود استفاده کنید.

ممیزی عملکرد «کدگذاری کارآمد تصاویر» Lighthouse می‌تواند به شما اطلاع دهد که آیا تصاویر JPEG در صفحه‌تان به‌طور بهینه فشرده شده‌اند یا نه.

• برای پیش‌دید کردن سایت، مشاهده برنامه را فشار دهید. سپس تمام‌صفحه را فشار دهید.
• ممیزی عملکرد Lighthouse (Lighthouse > گزینه‌ها > عملکرد) را در نسخه زنده Glitch خود اجرا کنید و تأیید کنید که ممیزی کدگذاری کارآمد تصاویر با موفقیت انجام شده است.

موفقیت‌آمیز بود. از Imagemin برای فشرده‌سازی بهینه تصاویر در صفحه‌تان استفاده کرده‌اید.