หน้านี้ได้รับการแปลโดย Cloud Translation API

การใช้ Imagemin กับ Webpack

Katie Hempenius

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

กลิทช์นี้มี 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

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

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

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