שימוש ב-Imagemin עם חבילת אינטרנט

קייטי המפניוס

כדי לבצע את ה-Codelab הזה, פותחים את הגליץ' הזה בכרטיסייה שנייה.

הגדרת הפלאגין של 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 לרשימת יישומי הפלאגין שמשתמשים ב-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

מוסיפים הגדרות לדחיסת תמונות 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 מוסיפה את 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 בדף שלכם דחוסות בצורה אופטימלית.

• כדי לראות תצוגה מקדימה של האתר, מקישים על View App ואז על Fullscreen .
• מפעילים את בדיקת הביצועים של Lighthouse (Lighthouse > אפשרויות > ביצועים) בגרסה הפעילה של התקלה, ומוודאים שהביקורת מקודדת תמונות ביעילות אושרה.

זהו! השתמשת ב-Imagemin כדי לדחוס באופן אופטימלי את התמונות בדף.