vue项目性能优化（图片优化）

一、图片保存阶段

ps 或 sketch 等图片，保存时或保存后，使用photoshop

1. .jpg 图片选择 “连续”

2. .png图片选择 “优化”

二、 图片压缩

1. 访问 https://tinypng.com 对所有图片进行压缩，后替换（图片质量不变，可多图一起压缩）

三、 单色icon 使用iconfont

1. 访问 http://www.iconfont.cn/ 上传和使用iconfont

四、制作雪碧图

1.一个网页可能有很多很多的小图标，就需要向服务器发送很多次访问请求，一是造成资源浪费，二是会导致访问速度变慢。这时候，把很多小图片（需要使用的小图标）放在一张图片上，按照一定的距离隔开，就解决了上述的两个问题。

显示雪碧图的条件：

1）需要一个设置好宽和高的容器

2）需要设置background-position的值（默认为（0，0），也就是图片的左上角），即移动图片到自己想要的图标位置。

调试方法:可以用浏览器自带的调试工具进行调试（如chrome浏览器按f12即可进行调试，慢慢移动background-position的值来达到理想的效果）

我们把表情放在一张图片上，图片的背景色为透明！

操作步骤：将图片向左移X个单位，然后向上移Y个单位，其中XY的具体数值是需要个人调试至合适位置得出的！

代码为：background-position：-xpx -ypx;

五、webpack打包、小图直接转base64

图片的处理

1.  小于8K的图片将直接以base64的形式内联在代码中，可以减少一次http请求。
2.  大于的呢?则直接file-loader打包, 这里并没有写明file-loader.但是确实是需要安装,否则会有问题

1. 安装url-loader
2. 安装file-loader

  cnpm install url-loader file-loader --save-dev

3. 新建 vue.config.js 配置如下：

  chainWebpack: config => {
        config.module
          .rule('images')
          .use('url-loader')
          .loader('url-loader')
          .tap(options => Object.assign(options, { limit: 6800,esModule: false}))
      }

注意：修改里面的limit的数值即可修改图片进行base64转换文件的大小限制