如何在Next.js(webpack5)中使用ImageMinimizerWebpackPlugin压缩图片

核心问题原因 #

• 插件放置位置错误：Webpack 5 环境下ImageMinimizerPlugin属于构建阶段的压缩工具，需要添加到optimization.minimizer配置数组中才能生效，直接推入plugins数组不会触发压缩逻辑
• SVGO配置格式不符合要求：你当前配置中svgo的plugins字段为对象格式，新版SVGO要求该字段为数组结构
• 可能缺少底层压缩依赖：如果未安装对应格式的图片压缩工具包，插件会静默跳过压缩，不会抛出构建错误
• 注意：仅生产构建next build会触发压缩逻辑，开发模式next dev默认不执行资源压缩

你不需要单独配置压缩后文件的输出文件夹 #

插件会自动复用Webpack内置/你配置的asset规则的输出路径，完全适配Next.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",
    })

    // 将插件添加到optimization.minimizer数组
    config.optimization.minimizer.push(
      new ImageMinimizerPlugin({
        minimizerOptions: {
          plugins: [
            ["jpegtran", { progressive: true }],
            ["optipng", { optimizationLevel: 5 }],
            [
              "svgo",
              {
                // 修正svgo plugins为数组格式
                plugins: [
                  {
                    name: "removeViewBox",
                    active: false,
                  },
                ],
              },
            ],
          ],
        },
      })
    )
    return config
  },
};

module.exports = nextConfig

额外检查项 #

请确保你已经安装了对应压缩依赖，执行以下命令安装即可：

npm install imagemin-jpegtran imagemin-optipng imagemin-svgo --save-dev

内容的提问来源于stack exchange，提问作者Dmitry