（五）资源优化 (经典性能优化解决方案)

资源的压缩与合并【见效最明显的优化方法】

为什么要压缩&合并

• 减少http请求数量
  请求越多，资源越多，所在网络造成的开销就越大
• 减少请求资源的大小
  节省流量，节省资源的大小，是我们不变的挑战

HTML压缩

• 使用在线工具进行压缩
• 使用html-minifier等npm工具
  
  webpack去进行html压缩时，也是集成了html-minifier工具
  上图可以看到初始时候的大小，压缩后的大小，节省高达30%，右边也会把压缩选项列出来，想压缩到什么样的情况，根据需要把不同的情况进行勾选或者反选

CSS压缩

• 使用在线工具进行压缩
• 使用clean-css等npm工具
  前面讲的html-minifier已经包含了clean-css
  

JS压缩与混淆

• 使用在线工具进行压缩
• 使用Webpack对JS在构建时压缩
  压缩的同时做了混淆，所谓混淆，就是把它原来的变量名或者表达变成很难让别人理解的形式，也达到了安全的一个目的

CSS JS文件合并

把若干资源合并成一个资源把它加载过来，这样比较快，在网络上可以达到节省的目的，比如有20个css，合成一个css一次性加载过来可能要比你20个分别加载要快，因为每个资源在请求时都要经历不同的阶段，要进行dns查找，tcp链接建立，这两个可以复用，我们后面TTFB还有下载没有办法避免，下载20个资源分别下载和合成一个下载的下载量没什么变化，这个不考虑，但是TTFB没办法避免，20个肯定要比1个稍微大一些，但是合并在一起带来的问题是后续的解析处理和你自己的维护带来了一些麻烦，所以折中考虑一下问题

• 若干小文件，maybe…
• 无冲突，服务相同的模块，ok
• 优化加载，no
  现在希望渐进式加载，如果把css和js都合成一个，这两个文件只有加载和解析完才能进行渲染，这个时间会很长，用户会看到很长时间的白屏
  我们现在会用很多缓存技术，如果文件全合成一个，其中修改了一点点会造成整个文件的过期，就需要缓存去重新的进行更新，这也是极大的效率上的浪费

图片格式优化【多种图片格式，哪种最合适】

图片优化的方案

如何正确选择图片格式？不同的格式有不同的优缺点，在不同场景中使用特定的图片会有一定的优势
图片的大小要选择合适，不要传一个过大的图片到客户端，然后再去进行尺寸大小的调整，这样过大的图片在网络上是一个浪费，需要多大就传多大的图片
能适配不同屏幕的尺寸，我有不同的用户屏幕，要去设计不同尺寸的图片在不同屏幕上进行显示，保证在每个显示器上都有合适尺寸的图片来进行合适的显示
压缩：对于图片压缩，一定要谨慎，当对图片进行压缩时对图片的质量也造成一定的损失，我们要根据我们网站的实际情况来看，摄影类网站图片要追求精致感，电商网站追求图片不高
图片资源优先级：重要的图片先进行加载
图