將 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/ 目錄，但該目錄尚未 必須先壓縮圖片

  • 按一下「Remix to Edit」即可編輯專案。
  • 首先，請在 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()
  ]
}

現在您已擁有可使用 Imagemin 壓縮圖片的 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-webpack-plugin 的預設外掛程式進行 JPG 壓縮 (imagemin-jpegtran)，請使用 imagemin-mozjpeg 外掛程式。與 Jpegtran 不同的是 Mozjpeg 可讓您指定 JPG 壓縮的壓縮品質。我們 已在這個 Glitch 中為您安裝 Mozjpeg 外掛程式，但您需要 編輯 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 應該設定 而負責任的 AI 技術做法 有助於達成這項目標

不過，如果您要新增非預設外掛程式的設定 (例如 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})]
    })
  ]
}

透過 Lighthouse 重新執行 webpack 並驗證結果

  • 在控制台中重新執行 webpack：
webpack --config webpack.config.js --mode production

太棒了！您的變更應修正 Webpack 警告。

Webpack 針對大型圖片發出警告，但無法指出圖片是否 未壓縮或未壓縮因此，使用實用工具 用於驗證變更的 Lighthouse。

Lighthouse 的「有效率地編碼圖片」可讓您瞭解 您網頁上的 JPEG 圖片會以最佳壓縮方式壓縮，

  • 如要預覽網站，請按下「查看應用程式」。然後按下 全螢幕 全螢幕。
  • 執行 Lighthouse 效能稽核 (「Lighthouse」>「選項」>「效能」) ，並確認已有效率地為 是否通過了映像檔稽核。

傳遞「有效率地為圖片編碼」Lighthouse 的稽核

大功告成！你已經使用 Imagemin 盡可能壓縮網頁上的圖片，