前言

前端性能优化中, 资源大小会比较影响性能的, 切图时ui可能提供的图片会比较大, 这时我们可能会需要稍微优化下图片体积, 本篇介绍的是图片压缩loaderimage-webpack-loader; 如下在图片未压缩时的大小:

起步

搭建项目, 使用的是vue-cli3搭建

安装依赖

npm install image-webpack-loader --save-dev

使用

安装惯例, 我们先阅读一下官方文档

官方文档提供的案例是按照webpack默认配置的, 与vue-cli3中的配置不太一样, 可以去看下vue-cli文档是怎么配置的; 打开vue.config.js 加上 image-webpack-loader 的相关配置

//vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
    .rule('images')
    .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
    .use('image-webpack-loader')
    .loader('image-webpack-loader')
    .tap(options => {
      let option = {
        ...options,
        mozjpeg: {
          progressive: true,
        },
        // optipng.enabled: false will disable optipng
        optipng: {
          enabled: false,
        },
        pngquant: {
          quality: [0.65, 0.90],
          speed: 4
        },
        gifsicle: {
          interlaced: false,
        },
        // webp选项将启用webp
        webp: {
          quality: 80
        }
      }
      return option 
    })
  }
}

配置完之后我们重新运行项目, 发现已经压缩了很多, 时间也提升了

可以通过配置quality来修改压缩的程度,

mozjpeg —压缩JPEG图像
optipng —压缩PNG图像
pngquant —压缩PNG图像
svgo —压缩SVG图像
gifsicle —压缩GIF图像
webp —将JPG和PNG图像压缩为WEBP 可以通过指定禁用每个优化器optimizer.enabled: false，只需将它们放在选项中就可以启用可选的优化器。

打包

打包看下

前端工程化之压缩图片

前言

起步

安装依赖

使用

打包