Sử dụng Imagemin với webpack

Katie Hempenius
Katie Hempenius
X

Thiết lập trình bổ trợ gói web Imagemin

Nhiễu này đã chứa webpack, webpack-cli và imagemin-webpack-plugin. Để thêm cấu hình cho Imagemin, bạn cần để chỉnh sửa tệp webpack.config.js.

webpack.config.js hiện tại cho dự án này đã sao chép hình ảnh từ thư mục images/ sang thư mục dist/ nhưng nó chưa được nén chúng.

  • Nhấp vào Phối lại để chỉnh sửa để có thể chỉnh sửa dự án.
  • Trước tiên, hãy khai báo trình bổ trợ Imagemin bằng cách thêm mã này vào phía trên cùng của webpack.config.js:
const ImageminPlugin = require('imagemin-webpack-plugin').default;
  • Tiếp theo, hãy thêm mã sau đây làm mục cuối cùng trong mảng plugins[]. Chiến dịch này thêm Imagemin vào danh sách các trình bổ trợ mà webpack sử dụng:
new ImageminPlugin()

✔︎ Nhận phòng

Bây giờ, tệp webpack.config.js hoàn chỉnh của bạn sẽ có dạng như sau:

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()
  ]
}

Bạn hiện đã có cấu hình webpack nén hình ảnh bằng Imagemin.

Chạy gói web

  • Nhấp vào Terminal (lưu ý: nếu nút Terminal không hiển thị, thì có thể bạn cần phải dùng chế độ Toàn màn hình).
  • Để nén hình ảnh, hãy chạy webpack bằng cách nhập lệnh sau vào bảng điều khiển:
webpack --config webpack.config.js --mode development

Nhưng điều gì sẽ xảy ra nếu bạn chạy webpack ở chế độ sản xuất?

  • Chạy lại webpack, nhưng lần này ở chế độ phát hành chính thức:
webpack --config webpack.config.js --mode production

Lần này, webpack sẽ đưa ra cảnh báo cho bạn biết rằng tệp PNG của mình tệp, bất kể có nén, vẫn vượt quá giới hạn kích thước được đề xuất. (Chế độ development và production của webpack ưu tiên những thứ khác nhau, điều này đó là lý do bạn chỉ thấy cảnh báo này khi đang chạy gói web ở chế độ phát hành chính thức.)

Tuỳ chỉnh cấu hình Imagemin của chúng tôi để khắc phục cảnh báo này.

Tuỳ chỉnh cấu hình Imagemin của bạn

Thêm chế độ cài đặt để nén hình ảnh PNG bằng cách truyền đối tượng sau vào ImageminPlugin():

{pngquant: ({quality: [0.5, 0.5]})}

Mã này yêu cầu Imagemin nén PNG bằng trình bổ trợ Pngquant. Chiến lược phát hành đĩa đơn Trường quality sử dụng dải giá trị min và max để xác định Mức độ nén: 0 là thấp nhất, 1 là cao nhất. Để buộc tất cả hình ảnh được nén ở chất lượng 50%, hãy truyền 0.5 dưới dạng cả giá trị tối thiểu và tối đa.

✔︎ Nhận phòng

Bây giờ, tệp webpack.config.js của bạn sẽ có dạng như sau:

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]}),
      })
  ]
}

Nhưng còn tệp JPEG thì sao? Dự án cũng có hình ảnh JPEG, vì vậy bạn nên chỉ định cách chúng được nén.

Tuỳ chỉnh cấu hình Imagemin của bạn (tiếp theo)

Thay vì sử dụng trình bổ trợ mặc định của imagemin-webpack-plugin để nén JPG (imagemin-jpegtran), sử dụng trình bổ trợ imagemin-mozjpeg. Không giống như Jpegtran, Mozjpeg cho phép bạn chỉ định chất lượng nén cho nén JPG. Chúng tôi đã đã cài đặt trình bổ trợ Mozjpeg cho bạn trong sự cố này, nhưng bạn cần phải chỉnh sửa tệp webpack.config.js của bạn:

  • Khởi chạy trình bổ trợ imagemin-mozjpeg bằng cách thêm dòng sau vào đầu tệp webpack.config.js:
const imageminMozjpeg = require('imagemin-mozjpeg');
  • Thêm thuộc tính plugins vào đối tượng được truyền đến ImageminPlugin() sao cho đối tượng bây giờ sẽ có dạng như sau:
new ImageminPlugin({
  pngquant: ({quality: [0.5, 0.5]}),
  plugins: [imageminMozjpeg({quality: 50})]
})

Mã này yêu cầu webpack nén JPG ở chất lượng 50 (0 là kém nhất; 100 là phù hợp nhất) bằng cách sử dụng trình bổ trợ Mozjpeg.

Nếu bạn đang thêm cài đặt cho trình bổ trợ là trình bổ trợ mặc định của imagemin-webpack-plugin, bạn có thể thêm chúng dưới dạng một cặp khoá-đối tượng trên đối tượng được truyền đến ImageminPlugin(). Chế độ cài đặt cho Pnquant là một ví dụ điển hình về này.

Tuy nhiên, nếu bạn thêm chế độ cài đặt cho các trình bổ trợ không phải trình bổ trợ mặc định (ví dụ: Mozjpeg), bạn nên thêm chúng bằng cách đưa chúng vào mảng tương ứng với thuộc tính plugins.

✔︎ Nhận phòng

Mã của bạn bây giờ sẽ có dạng như sau:

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})]
    })
  ]
}

Chạy lại gói web và xác minh kết quả bằng Lighthouse

  • Trong bảng điều khiển, hãy chạy lại gói web:
webpack --config webpack.config.js --mode production

Thật tuyệt! Nội dung thay đổi của bạn chắc hẳn đã khắc phục các cảnh báo về gói web.

webpack cảnh báo bạn về các hình ảnh lớn nhưng không thể cho bạn biết liệu hình ảnh không nén hoặc không được nén. Đây là lý do bạn nên sử dụng Lighthouse để xác minh các thay đổi của bạn.

"Mã hoá hình ảnh hiệu quả" của Lighthouse công cụ kiểm tra hiệu suất có thể cho bạn biết liệu hình ảnh JPEG trên trang của bạn được nén một cách tối ưu.

  • Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó nhấn Toàn màn hình toàn màn hình.
  • Chạy bài kiểm tra hiệu suất của Lighthouse (Lighthouse > Tuỳ chọn > Hiệu suất) trên phiên bản trực tiếp của trục trặc và xác minh rằng Mã hoá hiệu quả hình ảnh.

Truyền "Mã hoá hình ảnh hiệu quả" kiểm tra trong Lighthouse

Thành công! Bạn đã sử dụng Imagemin để nén hình ảnh trên trang của bạn một cách tối ưu.