基于强视觉项目进行的图片压缩优化

背景

  • 随着官网需求越来越大，打包越来越大，导致项目在C端的加载越来越慢，经一轮js和css压缩后，发现大批量的图
    片没有压缩很好，故得上述情况
    gzip_origin

没有优化前

  • 21.2M

实现方式

  • 网站压缩
    1）推荐网站1：tinypng此网站可以批量压缩图片，当然一次性压太多，网站也会报错无法压缩成功，多试几次就好了，并且，这个网站的压缩图片可以反复压很多次
    2) 推荐网站2：bejson 该网站有点事自定义压缩体积，缺点是一次只能压一张图片
    3) 效果：
    i）经过一轮把所有图片在网站进行压缩以后，此时的大小为： 7.37M
    gzip_one

  • 代码压缩
    1） 引入 url-loader

    1
    2
    npm install file-loader -D
    npm install url-loader -D

    2) vue.config.js 中配置如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    chainWebpack: (config) => {
      config.module
      .rule('images')
      .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
      .use('url-loader')
      .loader('url-loader')
      .options({ bypassOnDebug: true })
      .end();
      },

    3) 此时打包后大小为 4.6M

    gzip_end

感想与收获