你必须知道的图片压缩

1，为啥要压缩图片

可能我们最平常的操作图片就是从ui设计师那儿拿到图片展示出来就行，除非图片特别大我们才会压缩一下，但是有时候压缩会降低品质，就在这里推荐几个比较好用的处理图片的办法

2，imagemin-pngquant（imagemin-pngquant）

npm install imagemin-pngquant

在webpack里面配置

  import ImageminPlugin from 'imagemin-webpack-plugin'
    import imageminMozjpeg from 'imagemin-mozjpeg'

    module.exports = {
      plugins: [
        new ImageminPlugin({
          plugins: [
            imageminMozjpeg({
              quality: 100,
              progressive: true
            })
          ]
        })
      ]
    }

3，按需加载

1. 传统的办法是监听滚动的位置，符合条件了就按需加载（这是我之前写的懒加载）
2. 使用强大的IntersectionObserver

<li>
  <img class="list-item-img" alt="loading" data-src='a.jpg'/>
</li>
<li>
  <img class="list-item-img" alt="loading" data-src='b.jpg'/>
</li>
<li>
  <img class="list-item-img" alt="loading" data-src='c.jpg'/>
</li>
<li>
  <img class="list-item-img" alt="loading" data-src='d.jpg'/>
</li>

const observer = new IntersectionObserver(function(changes) {
  changes.forEach(function(element, index) {
   // 当这个值大于0，说明满足我们的加载条件了，这个值可通过rootMargin手动设置
    if (element.intersectionRatio > 0) {
      // 放弃监听，防止性能浪费，并加载图片。
      observer.unobserve(element.target);
      element.target.src = element.target.dataset.src;
    }
  });
});
function initObserver() {
  const listItems = document.querySelectorAll('.list-item-img');
  listItems.forEach(function(item) {
   // 对每个list元素进行监听
    observer.observe(item);
  });
}
initObserver();

这样每张图片就会有不同的waiting时间，就达到效果了