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

Katie Hempenius

כדי לעקוב אחרי ה-Codelab הזה, פותחים את ה-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 לא מופיע, יכול להיות שצריך להשתמש באפשרות Fullscreen (מסך מלא)).
• כדי לדחוס את התמונות, מריצים את 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 בדף דחוסות בצורה אופטימלית.

• כדי לראות תצוגה מקדימה של האתר, לוחצים על View App (הצגת האפליקציה) ואז על Fullscreen (מסך מלא) .
• מריצים את ביקורת הביצועים של Lighthouse‏ (Lighthouse > Options > Performance) בגרסה הפעילה של Glitch ומוודאים שהביקורת Efficiently encode images עברה בהצלחה.

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