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文件

  

 

上一篇:EFCore:关于DDD中值对象(Owns)无法更新数值


下一篇:MySQL索引类型及优化