如何在 Webpack 中开启图片压缩

工具对比

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，这样可以成功安装。

最后

整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。

有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享

部分文档展示：

文章篇幅有限，后面的内容就不一一展示了

有需要的小伙伴，可以点下方卡片免费领取