如何在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

- Dmitry

Answer 1

我曾经遇到过同样的问题，但是无法通过 imagemin 解决。唯一有效的方法是按照 插件文档 中所述，切换到使用 squoosh。

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

- Julien Benchetrit

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community