文章目录
- 一文大白话讲清楚webpack基本使用------16------图片压缩
- [1. 建议按文章顺序从头看，一看到底，豁然开朗](#1. 建议按文章顺序从头看，一看到底，豁然开朗)
- [2. 为啥要压缩图片](#2. 为啥要压缩图片)
- [3. 怎么压缩](#3. 怎么压缩)
- [4. image-webpack-loader压缩原理](#4. image-webpack-loader压缩原理)
一文大白话讲清楚webpack基本使用------16------图片压缩
1. 建议按文章顺序从头看，一看到底，豁然开朗
- 第一篇：
- 一文大白话讲清楚啥是个webpack
- 第二篇：
- 一文大白话讲清楚webpack基本使用------1------完成webpack的初步构建
- 第三篇
- 一文大白话讲清楚webpack基本使用------2------css相关loader的配置和使用
- 第四篇
- 一文大白话讲清楚webpack基本使用------3------图像相关loader的配置和使用
- 第五篇
- 一文大白话讲清楚webpack基本使用------4------vue-loader的配置和使用
- 第六篇
- 一文大白话讲清楚webpack基本使用------5------babel的配置和使用
- 第七篇
- 一文大白话讲清楚webpack基本使用------6------热更新及其原理
- 第八篇
- 一文大白话讲清楚webpack基本使用------7------代码分离和懒加载
- 第九篇
- # 一文大白话讲清楚webpack基本使用------8------开发环境和生产环境的配置和区别
- 第十篇
- 一文大白话讲清楚webpack基本使用------9------预加载之prefetch和preload以及webpackChunkName的使用
- 第十一篇
- 一文大白话讲清楚webpack基本使用------10------使用CDN优化加载速度
- 第十二篇
- 一文大白话讲清楚webpack基本使用------11------chunkIds和runtimeChunk
- 第十三篇
- 一文大白话讲清楚webpack基本使用------12------文件指纹和缓存机制
- 第十四篇
- 一文大白话讲清楚webpack基本使用------13------Js代码压缩
- 第十五篇
- 一文大白话讲清楚webpack基本使用------14------CSS代码压缩
- 第十六篇
- 一文大白话讲清楚webpack基本使用------15------HTML代码压缩
- 然后看本篇，图片压缩
2. 为啥要压缩图片
- 一句话，因为大，加载慢，还耗费带宽，所以要压缩小
3. 怎么压缩
-
webpack中压缩图片我们常用image-webpack-loader，当然配合file-loader或者url-loader使用，先压缩在使用么，就好像style-loader和css-loader的先后顺序一样
-
我们之前在第四篇文章一文大白话讲清楚webpack基本使用------3------图像相关loader的配置和使用讲webpack处理图片的时候再src/img下面放了一个index.jpg
-
图片被构建后，生成了新的图片文件
-
我们查看其大小发现是711KB
-
这时候我们安装和配置image-webpack-loader来进行图片压缩
js
npm install image-webpack-loader- 配置
js
{
loader:'image-webpack-loader',
options:{
mozjpg:{
progressive:true,//压缩算法，采用渐进式，progressive，也可以是基线式Baseline
quality:65//输出质量,jpg一般建议不低于60
}
}
}
-
我们重新构建，发现构建后的图片变小了，成了674KB
-
上面我们只配置了对jpg图片类型的压缩，我们还可以配置其他图片类型的压缩
js
{
loader:'image-webpack-loader',
options:{
mozjpg:{
progressive:true,//压缩算法，采用渐进式，progressive，也可以是基线式Baseline
quality:65//输出质量
},
optipng:{//专门用于优化PNG格式的配置
enabled:true//是否开启
},
pngquant:{
quality:[0.5,0.75],//设置png压缩质量范围为
speed:4//配置压缩速度
},
gifslice:{// 将GIF文件分割成多个小文件
interlaced:false,//是否使用隔行扫描技术来减少初始加载时间
optimizationLevel:3,//优化级别
slices:8//分成8块
},
webp:{
quality:75
}
}
}4. image-webpack-loader压缩原理
- image-webpack-loader内部其实是用Imagemin库来实现的
- 比如在压缩png时，使用pngquant,通过将图片转换为具有alpha通道的更高效的8为png，减小文件体积；或者使用pngcrush，通过尝试不同的压缩级别和png过滤方法来降低PNG IDAT数据流的大小