Vue CLI 3 打包时图片压缩处理的方法

在使用 Vue CLI 3 进行项目开发时，图片资源的优化是一个非常重要的环节。图片压缩可以有效减少打包后的文件体积，提升页面加载速度，从而改善用户体验。本文将介绍如何在 Vue CLI 3 项目中实现图片的自动压缩处理。

1. 使用 image-webpack-loader

image-webpack-loader 是一个基于 Webpack 的图片压缩工具，支持多种图片格式（如 JPEG、PNG、GIF、SVG 等）。通过配置 image-webpack-loader，可以在打包过程中自动对图片进行压缩。

1.1 安装 image-webpack-loader

首先，需要在项目中安装 image-webpack-loader：

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

1.2 配置 vue.config.js

在 Vue CLI 3 项目中，可以通过修改 vue.config.js 文件来配置 Webpack。以下是一个简单的配置示例：

module.exports = {
  chainWebpack: config => {
    // 图片压缩配置
    config.module
      .rule('images')
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({
        mozjpeg: {
          progressive: true,
          quality: 65
        },
        optipng: {
          enabled: false,
        },
        pngquant: {
          quality: [0.65, 0.90],
          speed: 4
        },
        gifsicle: {
          interlaced: false,
        },
        webp: {
          quality: 75
        }
      })
      .end()
  }
}

1.3 配置说明

• mozjpeg: 用于压缩 JPEG 图片，progressive 表示是否启用渐进式 JPEG，quality 表示压缩质量（0-100）。
• optipng: 用于压缩 PNG 图片，enabled 表示是否启用 OptiPNG 压缩。
• pngquant: 用于压缩 PNG 图片，quality 表示压缩质量范围，speed 表示压缩速度（1-11，数值越小压缩效果越好但速度越慢）。
• gifsicle: 用于压缩 GIF 图片，interlaced 表示是否启用交错 GIF。
• webp: 用于压缩 WebP 图片，quality 表示压缩质量（0-100）。

2. 使用 imagemin-webpack-plugin

imagemin-webpack-plugin 是另一个常用的图片压缩插件，它可以在打包过程中自动压缩图片资源。

2.1 安装 imagemin-webpack-plugin

首先，需要在项目中安装 imagemin-webpack-plugin：

npm install imagemin-webpack-plugin --save-dev

2.2 配置 vue.config.js

在 vue.config.js 中配置 imagemin-webpack-plugin：

const ImageminPlugin = require('imagemin-webpack-plugin').default;

module.exports = {
  configureWebpack: {
    plugins: [
      new ImageminPlugin({
        pngquant: {
          quality: '65-90'
        },
        jpegtran: {
          progressive: true
        },
        gifsicle: {
          interlaced: false
        },
        svgo: {
          plugins: [
            { removeViewBox: false }
          ]
        }
      })
    ]
  }
}

2.3 配置说明

• pngquant: 用于压缩 PNG 图片，quality 表示压缩质量范围。
• jpegtran: 用于压缩 JPEG 图片，progressive 表示是否启用渐进式 JPEG。
• gifsicle: 用于压缩 GIF 图片，interlaced 表示是否启用交错 GIF。
• svgo: 用于压缩 SVG 图片，plugins 表示 SVGO 插件的配置。

3. 总结

通过以上两种方法，可以在 Vue CLI 3 项目中实现图片的自动压缩处理。image-webpack-loader 和 imagemin-webpack-plugin 都是非常强大的工具，能够有效减少图片资源的体积，提升项目的性能。根据项目需求选择合适的工具和配置，可以进一步优化项目的打包结果。

在实际开发中，建议根据项目需求选择合适的压缩工具，并根据图片类型和压缩效果进行适当的配置调整，以达到最佳的优化效果。