一、目标
实现项目构建时图片的最优性能方案：自动合并雪碧图并压缩图片
雪碧图方案：postcss-sprites
图片压缩方案：image-webpack-loader
二、图片合并工具 postcss-sprites
postcss-sprites 自动转换css中依赖的各种本地图片，并自动替换当前图片的css样式
三、图片压缩工具 image-webpack-loader
1. 压缩效率都为 67% 左右和 tinypng 在线压缩数据一致
2. 压缩之后图片基本无损
3. 会导致webpack打包时间变长，建议线上压缩
4. 可配置压缩质量 quality，设为75质量还是不错的，体积可再减小 15%
5. 观其代码发现图片资源都是本地压缩，安装各类图片的压缩工具
四、如何体验
1、安装与启动
npm install
npm run start
2、页面展示
五、postcss-sprites 配置介绍
stylesheetPath
保存输出样式表的文件夹的相对路径。如果它为null，将使用CSS文件的路径
- 默认值: null
- 是否必传:
false
spritePath
保存输出spritesheet的文件夹的相对路径
- 默认值:
./ - 是否必传:
true
basePath
您的基本路径将用于具有绝对CSS网址的图像
- 默认值:
./ - 是否必传:
false
relativeTo
指示url是否应该与当前CSS上下文或原始CSS样式表文件相对，Options:
file|rule
- 默认值:
file - 是否必传:
false
filterBy
定义过滤器函数，用于处理样式表中创建的图像列表，每个函数都必须返回一个Promise应该被解析或拒绝的函数。
- 默认值:
[] - 是否必传:
false
groupBy
定义将操作样式表中创建的图像列表的组函数，每个函数都必须返回一个Promise应该用字符串解析或拒绝的函数
- 默认值:
[] - 是否必传:
false
retina
定义是否在文件名中搜索视网膜标记
- 默认值:
false - 是否必传:
false
hooks
钩子函数配置
- 默认值:
{} - 是否必传:
false
hooks.onSaveSpritesheet
允许重写生成的spritesheet数据的钩子。如果返回值为string，则将其用作文件路径值，如果返回值为object，则将其用作将与当前spritesheet数据合并的值。返回值也可以是Promise，它应返回字符串或对象。
- 默认值:
null - 是否必传:
false
hooks.onUpdateRule
允许重写图像的CSS输出
- 默认值:
null - 是否必传:
false
spritesmith
雪碧图配置
- 默认值:
{} - 是否必传:
false
spritesmith.engine
配置雪碧图转换引擎
- 默认值:
pixelsmith - 是否必传:
false
spritesmith.algorithm
配置雪碧图算法
- 默认值:
binary-tree - 是否必传:
false
spritesmith.padding
配置雪碧图间隔的空间
- 默认值:
0 - 是否必传:
false
spritesmith.engineOpts
引擎默认参数配置
- 默认值:
{} - 是否必传:
false
spritesmith.exportOpts
引擎导出选项
- 默认值:
{} - 是否必传:
false
svgsprite
生成SVG的基础配置，具体事例见链接 github.com/jkphl/svg-s…
verbose
将插件输出打印到控制台。
- 默认值:
false - 是否必传:
false
