webpack 性能优化之小图片打包编码

前言

最近在做移动端的项目,用到了大量的小图标，但是图标的内容一直处在变化之中， 一直找UI去做精灵图也不太现实,然后前端同学去不断的定位精灵图的位置， 这也是极其耗费心智的。 众所周知,浏览器在加载页面时，会向服务器发送大量请求，如果页面中有大量的图标，每加载一个图标就会有一个http请求， 大量的请求会造成堵塞，如果放任不管，这也是非常影响体验的。

比较好的解决方案

后来研究了一下webpack,其实webpack 内置了图片打包方案，当图片小于某一大小时，webpack 会把图片进行base64转码，从而将图片变成base64编码格式，成为js文件内容的一部分，而不是引用的图片地址, 所以这就大大减少了http请求。

vue webpack配置方式:

  chainWebpack: config => {
    config.module
      .rule('images')
      .set('parser', {
        dataUrlCondition: {
          maxSize: 4 * 1024  // 图片或者svg 编译成base64的上限,超过规定大小，则不会编译，直接引入图片地址
        }
      })
    }

注意点

凡事有利必有弊,在配置图片编译大小上限时,不宜设置过大,如果太大，则会导致单个 js 文件体积太大,反倒会延长页面的加载时间，这会起到反作用;