將 Imagemin 與 webpack 搭配使用

Katie Hempenius
Katie Hempenius
X

設定 Imagemin webpack 外掛程式

這個 Glitch 已包含 webpack、webpack-cli 和 imagemin-webpack-plugin。如要新增 Imagemin 設定，請編輯 webpack.config.js 檔案。

這項專案現有的 webpack.config.js 會將圖片從 images/ 目錄複製到 dist/ 目錄，但不會壓縮圖片。

  • 按一下「重混即可編輯」，即可編輯專案。
  • 首先，在 webpack.config.js 頂端加入以下程式碼，宣告 Imagemin 外掛程式：
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()
  ]
}

您現在已擁有使用 Imagemin 壓縮圖片的 webpack 設定。

執行 webpack

  • 按一下「終端機」 (注意：如果沒有看到「終端機」按鈕，可能需要使用「全螢幕」選項)。
  • 如要壓縮圖片，請在控制台中輸入下列指令，執行 webpack：
webpack --config webpack.config.js --mode development

但如果在正式環境模式下執行 webpack，會發生什麼事？

  • 再次執行 webpack，但這次請使用正式環境模式：
webpack --config webpack.config.js --mode production

這次 webpack 會顯示警告，告知您 PNG 檔案雖然經過壓縮，但仍超過建議的大小限制。(webpack 的 development 和 production 模式會優先處理不同的項目，因此只有在正式環境模式下執行 webpack 時，才會看到這則警告)。

自訂 Imagemin 設定，修正這項警告。

自訂 Imagemin 設定

將下列物件傳遞至 ImageminPlugin()，新增壓縮 PNG 圖片的設定：

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

這段程式碼會指示 Imagemin 使用 Pngquant 外掛程式壓縮 PNG。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)。與 Jpegtran 不同，Mozjpeg 可讓您指定 JPG 壓縮的壓縮品質。我們已在這個 Glitch 中為您安裝 Mozjpeg 外掛程式，但您需要編輯 webpack.config.js 檔案：

  • 在 webpack.config.js 檔案頂端加入下列程式碼，初始化 imagemin-mozjpeg 外掛程式：
const imageminMozjpeg = require('imagemin-mozjpeg');
  • 在傳遞至 ImageminPlugin() 的物件中新增 plugins 屬性，物件現在會如下所示：
new ImageminPlugin({
  pngquant: ({quality: [0.5, 0.5]}),
  plugins: [imageminMozjpeg({quality: 50})]
})

這段程式碼會指示 webpack 使用 Mozjpeg 外掛程式，將 JPG 壓縮至 50 的品質 (0 為最差，100 為最佳)。

如要為 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 圖片是否經過最佳壓縮。

  • 如要預覽網站，請按下「View App」，然後按下「Fullscreen」全螢幕。
  • 在 Glitch 的實際版本上執行 Lighthouse 效能稽核 (「Lighthouse」>「Options」>「Performance」)，並確認「Efficiently encode images」稽核已通過。

通過 Lighthouse 的「有效率地對圖片進行編碼」稽核

太好了，您已使用 Imagemin 以最佳方式壓縮網頁上的圖片。