如何在 Webpack 中开启图片压缩

news2025/2/28 12:17:18

工具对比

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