如何在 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而不是使用assetWebpack 5的新功能。