Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

การใช้ Imagemin กับ Webpack

Katie Hempenius

ตั้งค่าปลั๊กอิน Imagemin webpack

Glitch นี้มี 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()

✔︎ เช็คอิน

ตอนนี้ไฟล์ 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 ไม่แสดง คุณอาจต้องใช้ตัวเลือกเต็มหน้าจอ)
หากต้องการบีบอัดรูปภาพ ให้เรียกใช้ 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-mozjpeg แทนการใช้ปลั๊กอินเริ่มต้นของ imagemin-webpack-plugin สำหรับการบีบอัด JPG (imagemin-jpegtran) Mozjpeg ต่างจาก Jpegtran ตรงที่ให้คุณระบุคุณภาพการบีบอัดสำหรับการบีบอัด 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

หากคุณกำลังเพิ่มการตั้งค่าสำหรับปลั๊กอินที่เป็นปลั๊กอินเริ่มต้นของ 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 > ตัวเลือก > ประสิทธิภาพ) ใน Glitch เวอร์ชันที่ใช้งานอยู่ และยืนยันว่าการตรวจสอบเข้ารหัสรูปภาพอย่างมีประสิทธิภาพผ่านแล้ว

ผ่านการตรวจสอบ "เข้ารหัสรูปภาพอย่างมีประสิทธิภาพ" ใน Lighthouse

สำเร็จ! คุณได้ใช้ Imagemin เพื่อบีบอัดรูปภาพในหน้าเว็บอย่างเหมาะสมที่สุดแล้ว