דף זה תורגם על ידי Cloud Translation API.

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

Katie Hempenius

הגדרת הפלאגין של 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()

✔✔צ'ק-אין

עכשיו קובץ 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 (הערה: אם לחצן הטרמינל לא מוצג, יכול להיות שתצטרכו להשתמש באפשרות 'מסך מלא').
כדי לדחוס את התמונות, מריצים את ה-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 בתקלה הזו, אך עליך עריכת הקובץ 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.

אם אתם מוסיפים הגדרות לפלאגין שהוא פלאגין ברירת מחדל של 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 > אפשרויות > ביצועים) בגרסה הפעילה של התקלה וודא שהקידוד היעיל בדיקת התמונות.

העברת ההגדרה 'קידוד יעיל של תמונות' ביקורת ב-Lighthouse

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