在前端开发过程中，图片是不可避免的一部分，但图片文件往往比较大，会导致网页加载速度变慢。因此，对于一些网页速度要求比较高的场合，需要对图片进行压缩，以达到极致优化的效果。在 Webpack 打包的过程中，我们可以使用一些工具或插件来压缩图片，本文将从以下几个方面进行详细介绍：
1. 手动压缩图片
手动压缩图片是最基本的方式，只需要使用一些图片编辑软件，比如 Photoshop、GIMP 等，将图片的大小和质量调整到最优的状态即可。这种方式虽然操作简单，但对于一些较大的图片，手动压缩会耗费很长的时间，同时也不利于实现自动化流程化。
2. 使用插件
image-webpack-loader
image-webpack-loader 是一个 Webpack 插件，可以在 Webpack 打包过程中自动压缩图片。在安装这个插件之前，需要先安装依赖项 imagemin：
yarn add imagemin imagemin-webp -D
安装完依赖项之后，我们就可以安装并配置 image-webpack-loader：
yarn add image-webpack-loader -D
并在 Webpack 配置文件中添加如下配置：
// javascriptcn.com 代码示例
module.exports = {
// ...
module: {
rules: [
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
{
loader: 'image-webpack-loader',
options: {
disable: process.env.NODE_ENV !== 'production', // 仅在生产环境中启用
},
},
],
},
],
},
// ...
}注意：使用
image-webpack-loader时需要在 Webpack 配置文件中将mode设置为production。
imagemin-webpack-plugin
imagemin-webpack-plugin 是另一个 Webpack 插件，支持多种压缩格式，并提供多种配置选项。安装 imagemin-webpack-plugin：
yarn add imagemin-webpack-plugin -D
然后在 Webpack 配置文件中添加如下配置：
// javascriptcn.com 代码示例
const ImageminWebpackPlugin = require('imagemin-webpack-plugin').default;
module.exports = {
// ...
plugins: [
new ImageminWebpackPlugin({
test: /\.(jpe?g|png|gif|svg)$/i,
disable: process.env.NODE_ENV !== 'production', // 仅在生产环境中启用
pngquant: {
quality: '65-80',
},
}),
],
// ...
};3. 使用在线压缩工具
如果使用插件不太符合你的需求，可以考虑使用一些在线压缩工具。目前比较流行的几个压缩工具，如 TinyPNG、Kraken.io 等，都提供了 API，可以在 Webpack 打包的过程中调用。
例如，在 Webpack 配置文件中可以添加一个调用 TinyPNG API 的插件：
// javascriptcn.com 代码示例
const TinifyWebpackPlugin = require('tinify-webpack-plugin');
const tinify = require('tinify');
tinify.key = 'YOUR_API_KEY';
module.exports = {
// ...
plugins: [
new TinifyWebpackPlugin({
test: /\.(jpe?g|png)$/i,
maxSize: 1024 * 5, // 最大压缩大小为 5K
}),
],
// ...
};总结
本文介绍了三种压缩图片的方式，包括手动压缩图片、使用插件和使用在线压缩工具。其中，使用插件可以自动化压缩图片，而在线压缩工具则可以压缩更多格式的图片。对于不同的需求，可以选择不同的方式来实现最优的压缩效果。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/651be01b95b1f8cacd37b18d