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 sóng này đã có 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 có của dự án này đang sao chép các hình ảnh từ thư mục images/ vào thư mục dist/ nhưng chưa nén các hình ảnh đó.

  • Nhấp vào Remix để chỉnh sửa (Remix) để 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 đầu webpack.config.js:
const ImageminPlugin = require('imagemin-webpack-plugin').default;
  • Tiếp theo, hãy thêm mã sau làm mục cuối cùng trong mảng plugins[]. Thao tác này sẽ thêm Imagemin vào danh sách các trình bổ trợ mà gói web 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ó một cấu hình webpack nén hình ảnh bằng Imagemin.

Chạy gói web

  • Nhấp vào Thiết bị đầu cuối (lưu ý: nếu nút Thiết bị đầu cuối không hiển thị, bạn có thể cần phải sử dụng tùy chọn Toàn màn hình).
  • Để nén hình ảnh, hãy chạy gói web 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 gói web ở chế độ phát hành công khai?

  • Chạy lại gói web, 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, gói web sẽ hiển thị cảnh báo cho bạn biết rằng các tệp PNG của bạn, dù có nén, vẫn vượt quá giới hạn kích thước đề xuất. (chế độ development và production của gói web ưu tiên những yếu tố khác nhau, do đó bạn chỉ thấy cảnh báo này khi chạy gói web ở chế độ phát hành chính thức.)

Tuỳ chỉnh cấu hình Imagemin để khắc phục cảnh báo này.

Tuỳ chỉnh cấu hình Imagemin

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 các tệp PNG bằng trình bổ trợ Pngquant. 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 và 1 là cao nhất. Để buộc tất cả hình ảnh phải nén ở 50% chất lượng, 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]}),
      })
  ]
}

Còn JPEG thì sao? Dự án cũng có hình ảnh JPEG, vì vậy, bạn cũng nên chỉ định cách nén các hình ảnh đó.

Tuỳ chỉnh cấu hình Imagemin (tiếp theo)

Thay vì dùng trình bổ trợ mặc định của imagemin-webpack-plugin để nén JPG (imagemin-jpegtran), hãy 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 quá trình nén JPG của bạn. Chúng tôi đã cài đặt trình bổ trợ Mozjpeg cho bạn trong lỗi này, nhưng bạn cần chỉnh sửa tệp webpack.config.js của mình:

  • Khởi chạy trình bổ trợ imagemin-mozjpeg bằng cách thêm dòng sau ở đầ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(), để đối tượng đó giờ đây 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 tệp JPG tới chất lượng 50 (0 là kém nhất; 100 là tốt nhất) bằng trình bổ trợ Mozjpeg.

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

Tuy nhiên, nếu thêm chế độ cài đặt cho các trình bổ trợ không mặc định (ví dụ: Mozjpeg), bạn phải thêm các trình bổ trợ đó 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! Những thay đổi của bạn chắc hẳn đã khắc phục các cảnh báo 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 hình ảnh được giải nén hay bị nén. Đây là lý do bạn nên sử dụng Lighthouse để xác minh những thay đổi của mình.

Quy trình kiểm tra hiệu suất "Mã hoá hình ảnh hiệu quả" của Lighthouse 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 hay chưa.

  • Để xem trước trang web, hãy nhấn vào View App (Xem ứng dụng), sau đó nhấn vào Fullscreen 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 Glitch và xác minh rằng bài kiểm tra Hình ảnh mã hoá hiệu quả đã được vượt qua.

Vượt qua quy trình kiểm tra "Mã hoá hình ảnh hiệu quả" trong Lighthouse

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