1.为什么要压缩/合并
1.减少http请求数量
2.减少请求资源大小
3.压缩
1.html/css压缩
在线工具压缩,插件html-minifier-terser,clean-css压缩
2.js压缩与混淆
webpack对js进行压缩
4.合并
css/js文件合并，虽然减少http请求，但是后续的解析出不同逻辑会很麻烦
js文件之间没有冲突
且如果有些js文件可以后续再加载实现懒加载减少首屏渲染时间的话，我们就不合并 需要的内容先加载 后续的内容后续加载
且有缓存问题，你js全部合并再一起，那么一个文件变化将整个文件都不能用缓存
2.图片优化 其实图片文件比js什么文件大很多
1.选择正确的图片格式 不同格式有不同的优缺点
2.图片尺寸大小要合适 我们不要用过大尺寸的图片再网络上传输 然后再代码里再去设置宽高 因为尺寸大，size也大
3.适配不同屏幕的尺寸，不同屏幕返回不同的尺寸
4.图片压缩 但是要在图片精致之间权衡
5.图片资源优先级 重要的先加载
6.懒加载 即第5点的解决方法
7.利用工具实现以上几点
1.图片格式
jpg:进行啦很好的压缩，体积小，但是色彩比又很好，缺点:纹理和边缘会有锯齿感 比如logo
png:有很好纹理和边缘，色彩很好，但是体积大，
webp:比png提交小 但是优点和png一样，兼容性不大好，因为是谷歌提出的
2.图片加载
1.懒加载
原生：增加属性loading='lazy' 但是要浏览器支持 但是扩展性不好
插件:react:lazy-load-image-component;vue：v-lazy
2.渐进式图片
图片加载有两种 一种是从模糊逐渐变清晰 另一种是行扫描从上到下，第一种就叫渐进式图片，可以向美工要或者用插件生成渐进式图片
缺点:等待时间长 优点P:比行扫描好点
3.响应式图片
不同屏幕尺寸显示不同大小图片，我们得向美工要不同尺寸的图片
1.srcset,sizes属性
浏览器会根据屏幕宽度，加载srcset某个图片，一次只会加载一个图片 不会加载所有的
2.picture标签 浏览器不一定支持 也是用srcset来实现
3.字体优化
1.font-display属性:auto,block,swap.fallback,optional
黑色表示不显示字体，红色表示显示默认字体,蓝色表示字体下载好啦显示该字体
2.字体引入*
@font-face:src:'xxx' 从哪里加载
unicode-range:拆分字符集，因为所有汉字字符集很大，有效拆分只有使用到才会加载这个字符集
3.ajax+base64
base64对字体转码 然后嵌套到css/js里
