前端性能优化（四）资源优化

一.资源的压缩和合并

1.为什么要压缩和合并

1》减少http请求数量
2》减少请求资源大小

2.HTML压缩

1》使用在线工具进行压缩
2》使用html-minifier等npm工具（webpack就是集成的这个工具）

3.CSS压缩

1》使用在线工具压缩
2》使用clean-css等npm工具
3》webpack配置

4.JS压缩和混淆

1》使用在线工具压缩
2》webpack有关配置

这些其实mode：production 已经默认配置了

5.CSS、JS文件合并

1》若是若干个小文件，可以考虑合并
2》无冲突，服务相同的模块，建议合并
3》有利于首屏呈现的优先加载，其他的延迟加载 不建议合并

二.图片资源的优化

1.图片格式优化

（一）JPEG/JPG
①优点：很好的压缩比，画质也可以被很好的保存
②使用场景：展示较大的图片并较好的保存画质，比如首页的轮播图
③缺点：由于压缩比较高，若是比较追求纹理和边缘那就不太