Vue-cli 打包时如何进行图片资源优化

image-webpack-loader 是一个基于 Imagemin 的 Webpack 图片优化工具,可以对图片进行压缩和转码。在 Vue-cli 的配置文件中添加如下代码即可开启此插件:

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
        }
      })
  }
}

vue-img-lazy 是一个基于 Vue.js 的图片懒加载插件,可以有效减少首屏资源的加载,提高页面的初次渲染速度。在 Vue-cli 中使用时,需要在 main.js 中引入并注册该插件。

imgmin-webpack-plugin 是一个基于 Imagemin 的 Webpack 图片优化插件,可以对图片进行无损压缩。在 Vue-cli 的配置文件中添加如下代码即可开启此插件:

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

module.exports = {
  configureWebpack: {
    plugins: [
      new ImageminPlugin({
        test: /\.(jpe?g|png|gif|svg)$/i,
        pngquant: {
          quality: '65-80'
        },
        plugins: [
          require('imagemin-gifsicle')(),
          require('imagemin-mozjpeg')(),
          require('imagemin-pngquant')()
        ]
      })
    ]
  }
}

通过以上三种方式,我们可以有效地提高 Vue-cli 项目中图片资源的加载速度和质量,为用户提供更好的使用体验。