vue优化（1） vuecli3/4 【图片压缩 】||【文件压缩】

前言

　　vue-cli3和vue-cli4没有大的变化，只是将对应的构建依赖更新到最新的版本

压缩图片

　　安装依赖

npm i webpack-image-loader imagemin-mozjpeg            //imagemin-mozjpeg 是webpack-image-loader处理jpeg文件的依赖

　　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();
      //...其他配置
  },

文件压缩

　　前言

　　　　在vue-cli3中，脚手架对production模式中对js、css的分块、压缩、提取公用文件、去除死代码的处理配置是非常完美的，但是即便如此，任然会有一些vendors文件出现过大的情况，这时候，就可以将大js、css文件压缩成gz文件，大大减少请求的体积

　　下载依赖

npm i compression-webpack-plugin

　　vue.config.js

 configureWebpack: {
    plugins: [
      new CompressionPlugin({
        test: /\.(js|css|less)$/, // 匹配文件名
        threshold: 10240, // 对超过10k的数据压缩
        minRatio: 0.8, //压缩比例 值越大，压缩后的gz文件越小
        deleteOriginalAssets: true, // 删除源文件
      }),
    ],
    //...其他配置      
}