vue-cli4 图片压缩

搭配webpack的webpack-image-loader来做压缩

1、首先安装依赖包

npm i webpack-image-loader imagemin-mozjpeg  --save -dev

2、vue.config.js配置

chainWebpack: (config) => {
    const customOptions = {
      mozjpeg: {
        progressive: true,
        quality: 50,
      },
      optipng: {
        enabled: true,
      },
      pngquant: {
        quality: [0.5, 0.65],
        speed: 4,
      },
      gifsicle: {
        interlaced: false,
      },
      // // 不支持WEBP就不要写这一项
      // webp: {
      //   quality: 75,
      // },
    };
    config.module
      .rule("images")
      .test(/\.(gif|png|jpg|jpeg)$/i)
      .use("image-webpack-loader")
      .loader("image-webpack-loader")
      .options(customOptions)
      .end();
      //...其他配置
  },
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容