vue 打包时图片压缩

1、image-webpack-loader 是依赖于 imagemin-pngquant，则必须要按顺序安装

npm install imagemin-pngquant --save-dev
npm install image-webpack-loader --save-dev

2、安装 compression-webpack-plugin

如果安装太高的版本，则会报错
可安装 下面的版本

3、在vue.config.js 配置

const CompressionPlugin = require("compression-webpack-plugin")

chainWebpack: config => {
        // 解决ie11兼容ES6
        config.entry('main').add('babel-polyfill')
        // 开启图片压缩
        config.module.rule('images')
        .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
        .use('image-webpack-loader')
        .loader('image-webpack-loader')
        .options({ bypassOnDebug: true })
        // 开启js、css压缩
        if (process.env.NODE_ENV === 'development') {
          config.plugin('compressionPlugin')
          .use(new CompressionPlugin({
            test:/\.js$|\.html$|.\css/, // 匹配文件名
            threshold: 10240, // 对超过10k的数据压缩
            deleteOriginalAssets: false // 不删除源文件
          }))
        }
    },
    transpileDependencies: [
        'biyi-admin', // 指定对第三方依赖包进行babel-polyfill处理
    ]

4、打包后的对比

（1）压缩后的

（2）压缩前

5、后端配合linux

在html加上

gzip on; 

gzip_static on;

gzip_buffers 4 16k;

gzip_comp_level 5;

gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;