webpack 使用 image-webpack-loader, 我们可以对打包图片文件进行压缩。
原文描述 :Minify PNG, JPEG, GIF, SVG and WEBP images with imagemin
内部使用 imagemin 库处理并压缩图片
//文件资源解析器(例如图片) + 图片压缩 (尽量使用cnpm)
{
test: /\.(gif|png|jpe?g|svg)$/i,
use: [
{
loader: "file-loader",
options: {
name: "[name].[hash:7].[ext]",
outputPath: "img",
},
},
{
loader: "image-webpack-loader",
options: {
mozjpeg: {
progressive: true,
quality: 60, // JPG 输出的质量 一般60为可接受的
},
optipng: {
enabled: true,
},
pngquant: {
quality: [0.5, 0.65], // PNG 质量范围
speed: 4,
},
gifsicle: {
interlaced: false,// 优化GIF
},
webp: {
quality: 75, // 转换为 webp
},
},
},
],
},
需要准备的
- file-loader 必须安装好
npm install file-loader --save-dev
相关配置:
options: {
name: "[name].[hash:7].[ext]", // 文件名-哈希7位-拓展名
outputPath: "img", // 输出路径/img
},
- 接着安装 image-webpack-loader
npm install image-webpack-loader --save-dev
注意和可能踩坑的几个点
- 个人使用过程中尝试了 npm / yarn 安装发现不成功,依赖安装不完全
报错如下: error:cannot find module “imagemin-gifsicle”
尝试了安装 imagemin-gifsicle 未能解决问题。最后, 删除 package.json 的安装依赖, 使用 cnpm 安装,解决了问题。
- 插件的配置
技术文档原文描述:
Comes bundled with the following optimizers, which are automatically enabled by default:
mozjpeg — Compress JPEG images
optipng — Compress PNG images
pngquant — Compress PNG images
svgo — Compress SVG images
gifsicle — Compress GIF images
意思是 以上的几个压缩是默认开启的 需要手动通过 enabled: false 去单独关闭不需要的插件。
测试结果
1.引入图片文件
/* app.js */
// 引入图片
import img from "../assets/img/sample.jpg";
const oImg = new Image();
oImg.src = img;
document.body.append(oImg);
2.打包对比(JPG 60%)
- sample 图像 打包压缩前的原大小 430KB
- sample 图像 打包压缩(60品质) 99KB
体积减小为 1/4 , 在提升项目性能上还是蛮有效的。