如何在 Webpack 中开启图片压缩

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第 1 天，点击查看活动详情

工具对比

npmtrends.com/image-minim…

这四个压缩工具，从下载量来看，image-webpack-loader 较多，image-minimizer-webpack-plugin、imagemin-webpack-plugin 次之，imagemin-webpack 已经不再维护，因此不考虑此工具。

www.npmjs.com/package/ima…

以下是对 image-minimizer-webpack-plugin 、image-webpack-loader 和 imagemin-webpack-plugin 的使用进行简要介绍。

使用与配置

先给出没有加压缩工具的 webpack 配置

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: {
    index: './index.js',
  },
  output: {
    path: path.resolve(__dirname, 'build1'),
    filename: '[name].js',
    clean: true
  },
  module: {
    rules: [{
      test: /.(css)$/,
      use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
    }, {
      test: /.(jpe?g|png|gif|ico|svg)$/,
      exclude: /node_modules/,
      type: 'asset',
      parser: {
        dataUrlCondition: {
          maxSize: 8 * 1024
        }
      },
    }]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      ignoreOrder: false
    }),
  ],
  mode: 'production',
  optimization: {
    runtimeChunk: {
      name: 'runtime~single'
    }
  }
}

image-minimizer-webpack-plugin

安装：cnpm i image-minimizer-webpack-plugin imagemin -D

无损压缩：cnpm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo -D

配置如下：

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

module.exports = {
  optimization: {
    minimizer:[
      new ImageMinimizerPlugin({
        minimizer: {
          implementation: ImageMinimizerPlugin.imageminGenerate,
          options: {
            plugins: [
              ["gifsicle", { interlaced: true }],
              ["jpegtran", { progressive: true }],
              ["optipng", { optimizationLevel: 5 }],
              [
                "svgo",
                {
                  plugins: [
                    "preset-default",
                    "prefixIds",
                    {
                      name: "sortAttrs",
                      params: {
                        xmlnsOrder: "alphabetical",
                      },
                    },
                  ],
                },
              ],
            ],
          },
        },
      }),
    ]
  }
}

打包后，图片大小压缩至 7.41 MB。

---

有损压缩：cnpm install @squoosh/lib --save-dev

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

module.exports = {
  optimization: {
    minimizer:[
      new ImageMinimizerPlugin({
        minimizer: {
          implementation: ImageMinimizerPlugin.squooshMinify
        }
      }),
    ],
    runtimeChunk: {
      name: 'runtime~single'
    }
  }
}

打包后，图片大小压缩至 1.48 MB。

image-webpack-loader

安装：cnpm install image-webpack-loader -D

配置如下：

module.exports = {
  module: {
    rules: [{
      test: /.(jpe?g|png|gif|ico|svg)$/,
      exclude: /node_modules/,
      type: 'asset',
      parser: {
        dataUrlCondition: {
          maxSize: 8 * 1024
        }
      },
      use: [
        {
          loader: 'image-webpack-loader',
          // options: {
          //   disable: process.env.NODE_ENV === 'development'
          // },
        }
      ]
    }]
  },
}

打包后，图片大小压缩至 1.69 MB。

imagemin-webpack-plugin

安装：cnpm install imagemin-webpack-plugin

配置如下：

const ImageminPlugin = require('imagemin-webpack-plugin').default

module.exports = {
  optimization: {
    minimizer: [
      new ImageminPlugin({
        // disable: process.env.NODE_ENV === 'development',
      }),
    ],
    runtimeChunk: {
      name: 'runtime~single'
    }
  }
}

打包后，图片大小压缩至 7.64 MB。

压缩前后对比

这三个工具的共同点：压缩图片都依赖于 imagemin，所以对使用这几个工具压缩图片前后体积对比，个人感觉意义不大；如果对同一图片压缩后体积大小不一致，甚至差别很大，很可能是因为压缩相关的配置不太一致。

不过我们可以就以上的配置（基本是官方给的示例配置），去做一些比较。

工具	使用感受	压缩前	压缩后
image-minimizer-webpack-plugin	配置较复杂	8.26 MB	无损：7.41 MB 有损：1.48 MB
image-webpack-loader	配置简单	8.26 MB	有损：1.69 MB
imagemin-webpack-plugin	配置简单	8.26 MB	无损：7.64 MB

使用建议

最后从工具的流行程度、使用感受、压缩力度等方面综合考虑，推荐使用 image-webpack-loader 来压缩图片。

注意：在安装包的时候可能会报错，npm install image-webpack-loader -D，主要是在下载一系列压缩工具的时候出错。这时可以切换为国内镜像，用 cnpm install image-webpack-loader -D，这样可以成功安装。

参考

• imagemin
• image-minimizer-webpack-plugin
• github: image-minimizer-webpack-plugin
• image-webpack-loader
• imagemin-webpack-plugin