如何在 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 时，如Plugin docs 中所述。

如果你想使用imagemin，我目前唯一推荐的解决方案是使用image-webpack-loader，而不是Webpack 5 的新asset 功能。