前言
常见的资源优化方案有：
1.资源压缩与合并
2.图片格式优化
3.图片加载优化
资源压缩与合并
为什么要压缩与合并
1.减少http请求数量
请求越多，资源越多，占用的网络开销越大
2.减少请求资源的大小
加载资源越小请求速度越快
如何实现资源压缩与合并
1.HTML压缩
使用在线工具进行压缩
使用html-minifier等npm工具(http://kangax.github.io/html-minifier/)
2.CSS压缩
使用在线工具进行压缩
使用clean-css等npm工具(http://kangax.github.io/html-minifier/)
3.JS压缩与混淆
使用在线工具进行压缩
使用webpack对JS在构建时压缩
4.CSS 、JS文件合并
若干小文件可以考虑文件合并
主要还是考虑用户体验进行文件合并
图片资源优化
图片优化的方案
1.如何选择正确的图片格式
JPG/JPEG的优点： 很高的压缩比，画质很好的保存，适用于大图，banner图。
JPG/JPEG的缺点：对画质要求高的应用，画质不细腻，会出现失真的现象。
PNG的优点：矢量图不失真。
PNG的缺点：体积较大，适合做些小图标，logo。
PNG压缩推荐插件： imagemin-pngquant(https://github.com/imagemin/imagemin-pngquant)
2.图片大小选择合适，图片不要过大，会浪费不必要的开销
3.压缩
imagemin在线压缩(https://imagemin.saasify.sh/)
imagemin插件(https://github.com/imagemin/imagemin)
图片加载优化(lazy loading)
1.原生的图片懒加载方案
<img loading="lazy" src="****" />
2.第三方图片懒加载方案
verlok/lazyload(https://github.com/verlok/vanilla-lazyload)
yall.js(https://github.com/malchata/yall.js#readme)
Blazy(https://github.com/dinbror/blazy)
3.使用渐进式图片
低像素到高像素转换，用户体验会好些
渐进式图片推荐插件： progressive-image( https://github.com/ccforward/progressive-image
)
4.使用响应式图片
适配不同屏幕的尺寸
<img src="imgSrc-200.jpg" sizes="50vw" srcset="imgSrc-100.jpg 200w,
imgSrc-400.jpg 400w, imgSrc-1000.jpg 1000w" >
srcset属性的使用: 根据不同图片下载不同的图片，响应式加载体验
sizes属性的使用: 指定大小
网友评论