การใช้ Imagemin กับ Webpack

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

ข้อบกพร่องนี้มี webpack, webpack-cli และ imagemin-webpack-plugin ในการเพิ่มการกำหนดค่าสำหรับ Imagemin คุณต้องมี เพื่อแก้ไขไฟล์ webpack.config.js

webpack.config.js ที่มีอยู่สำหรับโปรเจ็กต์นี้มีการคัดลอกรูปภาพจาก ไดเรกทอรี images/ ไปยังไดเรกทอรี 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

• คลิกเทอร์มินัล (หมายเหตุ: หากปุ่มเทอร์มินัลไม่แสดง คุณอาจต้องใช้ตัวเลือกแบบเต็มหน้าจอ)
• ในการบีบอัดรูปภาพ ให้เรียกใช้ 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 โดยใช้ปลั๊กอิน Pngqu ฟิลด์ 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

หากคุณกำลังเพิ่มการตั้งค่าสำหรับปลั๊กอินที่เป็นปลั๊กอินเริ่มต้นของ imagemin-webpack-plugin สามารถเพิ่มเป็นคู่คีย์-ออบเจ็กต์ในออบเจ็กต์ได้ ผ่านไปยัง ImageminPlugin() การตั้งค่าสำหรับ Pnquantity เป็นตัวอย่างที่ดีของ นี้

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

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