前言
最近在项目开发中，发现网页加载时图片加载的很慢，主要是图片太大，而服务器带宽有限，所以打算后台压缩一下图片..s
最近在项目开发中，发现网页加载时图片加载的很慢，主要是图片太大，而服务器带宽有限，所以打算后台压缩一下图片
于是乎，开始谷歌了很多教程，前期试了网上的好多教程代码，发现都不可以！
后来发现是因为网上很多对imagemin的api调用写法不对。下面教大家避坑！
进入正题
图片压缩主要会用到这几个包：
这里介绍一下， imagemin 是我们主要的图片处理工具，也是比较强大的图片处理工具。而 这里的imagemin-mozjpeg 、imagemin-pngquant 是作为Imagemin 的插件来使用
但是！这两个插件的npm官网给出的文档，api的调用是不对滴！
问题就出在于图片的输入路径和输出路径写法不对，应以Imagemin的为准
两个插件（以imageminPngquant为例）的文档给出的Usage ，输出路径（'build/images'）写在imagemin函数的参数里，这是错误的！！
1
2
3
4
5
6
7
8
9
10
|
(async () => {
await imagemin(['images/*.png'], 'build/images', {
plugins: [
imageminPngquant()
]
});
console.log('Images optimized');
})();
|
我们来看看imagemin的官网文档给出的 Usage
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
const imagemin = require('imagemin');
const imageminJpegtran = require('imagemin-jpegtran');
const imageminPngquant = require('imagemin-pngquant');
(async () => {
const files = await imagemin(['images/*.{jpg,png}'], {
destination: 'build/images',
plugins: [
imageminJpegtran(),
imageminPngquant({
quality: [0.6, 0.8]
})
]
});
console.log(files);
})();
|
可以看到输出路径是写在第二个参数对象的destination里，这才是正确的用法
我的的项目是采用了Egg.js框架，是一个阿里开发的基于Node.js企业级框架，下面贴上代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
const imagemin = require('imagemin');
const imageminMozjpeg = require("imagemin-mozjpeg");
const imageminPngquant = require("imagemin-pngquant");
const srcImage = '/images/*.{jpg,png}';
const output = '/imagesAfterCompress/*.{jpg,png}';
const result = await imagemin([srcImage], {
destination: output,
plugins: [
imageminMozjpeg({
quality: 70
}
),
imageminPngquant({
quality: [0.6, 0.8]
})
]
});
|
总结
- 两个image的依赖在npm官网上的使用方法和image的github文档上的使用方法有出入，要以image 的github文档为准
近期评论