vue优化1 vue-cli3/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();
      //...其他配置
  },

分割大js文件