如何在 Next.js（webpack 5）中使用 ImageMinimizerWebpackPlugin 壓縮圖像？

Question

我想使用這個插件壓縮圖像，但我面臨構建通過但圖像沒有壓縮的問題。

我是 webpack 的新手，不明白出了什么問題（也許我需要一個將壓縮文件作為文件夾的出口點？）

next.config.js

const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");

const nextConfig = {
  future: {
    webpack5: true
  },

  webpack: (config, options) => {

    config.module.rules.push({
      test: /\.(jpe?g|png|svg)$/i,
      type: "asset",
    })

    config.plugins.push(new ImageMinimizerPlugin({
      minimizerOptions: {
        // Lossless optimization with custom option
        // Feel free to experiment with options for better result for you
        plugins: [
          ["jpegtran", { progressive: true }],
          ["optipng", { optimizationLevel: 5 }],
          // Svgo configuration here https://github.com/svg/svgo#configuration
          [
            "svgo",
              {
                plugins: 
                  {
                    name: "removeViewBox",
                    active: false,
                  },
              },
            ],
          ],
        },
      })
    )
    return config
  },
};

module.exports = nextConfig

Answer 1

有同樣的問題，無法用imagemin解決。 唯一有效的是當我切換到使用 插件文檔中描述的squoosh 。

如果你想使用imagemin ，我目前唯一可以推薦的解決方案是使用image-webpack-loader而不是 Webpack 5 的新asset特性。